0.8.5 • Published 3 months ago
tym-form v0.8.5
[tym-form]
tym-form は，シンプルなform表示の angular コンポーネントです。
表示サンプル (Display image)
動作イメージ (Demo screen)
https://shinichi-tym.github.io/tym-ng-ws-demo/index.html#tym-form
インストール (Installation)
次のコマンド実行します。
npm install tym-form基本的な使い方
(Basic usage)
表示される場所に<ngx-tym-form>タグを作成します。
<ngx-tym-form #tymForm
[vals]="vals"
formTextUrl="./assets/panel1.txt"
></ngx-tym-form>表示する画面データを文字列 または テキストファイルとして用意します。
パネル１
───────────────────────
登録日 [a ]
商品ID [b ]
商品区分 [c ] / 商品コード [d ]
[DEF]
{id}:{var name}:{type}:{inputmode}:{pattern}:{required}:{placeholder}:{title}:{line}:{option}
a:tourokubi :date : : : : : : :
b:id :text : : : : : : :
c:cat :text : : : : : : :
d:code :text : : : : : : :コンポーネントを利用できるようにします。
:
import { TymFormModule } from "tym-form";
:
@NgModule({
declarations: [ .. ],
imports: [ TymFormModule ],コンポーネントの機能を利用する。
:
import { TymFormComponent } from "tym-form";
:
@ViewChild("tymForm")
private tymForm?: TymFormComponent;
:
// パネルの切り替え実行
this.tymform!.formTextUrl = './assets/panel2.txt';機能
(Features)
- 基本機能 (Basic Function)
- ファイル仕様 (File Specifications)
- ダイアログ表示機能 (Dialog View Function)
- カスタマイズ (Customization)
- 応用 (How To)
基本機能
formText に指定したテキスト または formTextUrl に指定したファイルの内容に従って画面を表示します。
<ngx-tym-form #tymForm
[vals]="vals"
[formText]="text"
[formTextUrl]="texturl"
[button]="button"
[enter]="enter"
[opts]="opts"
></ngx-tym-form>vals: any- form に表示する変数, form に入力された変数。
type.checkbox,type.radioでは, 文字列配列になります。
let vals = {
tourokubi: '2022-02-22',
id: '',
cat: '',
code: '',
}formText: string
パネル１
───────────────────────
登録日 [a ]
商品ID [b ]
商品区分 [c ] / 商品コード [d ]
[DEF]
a:tourokubi :date :::::::
b:id :text :::::::
c:cat :text :::::::
d:code :text :::::::formTextUrl: string
this.tymform!.formTextUrl = './assets/panel2.txt';button: (event: MouseEvent, vals: any, varname: string) => void
const button = (event: MouseEvent, vals: any, varname: string) => {
if (varname == 'b1') {
console.log('b1 ボタンが押されました');
}
}enter: (event: KeyboardEvent, vals: any, varname: string) => void
const enter = (event: KeyboardEvent, vals: any, varname: string) => {
if (varname == 'cmdtext') {
console.log(`${vals.cmdtext} を実行します`);
}
}opts: TYM_FORM_OPTS
/**
* フォームスタイルカスタマイズの定義
*/
export type TYM_FORM_OPTS = {
/** font size, default:16px */
/** line height, default:24px */
/** zoom, default:1 */
zoom?: string,
/** font color, default:#000 */
fontColor?: string,
/** font family, default:monospace, monospace */
fontFamily?: string,
/** tab size, default:unset */
tabSize?: string,
/** set '16px' to line height */
lineHeight16px?: boolean,
/** border style, default:double */
borderStyle?: string,
/** border color, default:#888 */
borderColor?: string,
/** background color, default:#eff */
backgroundColor?: string,
/** form element border, default:dotted 1px #ccc */
formBorder?: string,
/** form element font color, default:#000 */
formFontColor?: string,
/** form element background color, default:#efe */
formBackgroundColor?: string,
/** form element focus outline, default:solid 1px #888 */
formFocusOutline?: string,
/** form element invalid border, default:solid 1px #f00 */
formInvalidBorder?: string,
/** border bottom positions(0,1～max line), default:none */
borderLines?: number[],
}ファイル仕様
- 画面を定義します。
- 定義は
[DEF]の前後で画面部と定義部があります。 定義部は, 新しい定義部を入力するまで引き継がれます。画面部- 画面のフォーマットを定義します。
- 画面は固定長フォントでそのまま表示します。
- 入力フォームは
'['+'英小文字'～']'で定義します。 '英小文字'は定義部の{id}と対応させます。
定義部- 入力フォームの情報を定義します。
- 情報は
':'区切りで複数あります。 - カラム1 :
{id}(必須)画面部と定義部の入力フォームを関連付けに利用します。
- カラム2 :
{var name}(必須)valsの メンバー変数(例:vals.tourokubi) を定義します。
- カラム3 :
{type}(省略値:text)inputタグのtype属性の値を定義します。typeの値によって生成されるタグが異なります。checkbox,radioはspanと複数のinputタグfileはlabel,inputタグselectはselect,optionタグdatalistはinput,datalist,optionタグ
- カラム4 :
{inputmode}(省略値:なし)inputタグのinputmode属性の値を定義します。
- カラム5 :
{pattern}(省略値:なし)inputタグのpattern属性の値を定義します。
- カラム6 :
{required}{'y' | その他} (省略値:なし)inputタグのrequired属性の値を定義します。'y'を指定すると設定します。
- カラム7 :
{placeholder}(省略値:なし)inputタグのplaceholder属性の値を定義します。
- カラム8 :
{title}(省略値:なし)inputタグのtitle属性の値を定義します。
- カラム9 :
{line}(省略値:1)- 入力フォームの行数を定義します。
- カラム10 :
{option}(省略値:なし)- カンマ区切りで情報を定義します。
type:checkboxでは,ラベルtype:radioでは,ラベルtype:fileでは,未選択時のメッセージtype:selectでは, 複数の項目type:reset,type:buttonでは,ボタン名,color,bgColortype:submitでは,ボタン名,color,bgColor,method,action,target
※method,action,targetは<form>タグに設定します。type:datalistでは, 複数の項目
typeの値にfileをすると,<form>タグにenctype="multipart/form-data"を設定します。
ダイアログ表示機能
tym-modalsを利用してダイアログ形式で表示できます。
:
import { TymFormComponent } from "tym-form";
import { TymModalService } from "tym-modals";
:
constructor(private modal: TymModalService) { }
:let vals = {
tourokubi: '2022-02-22',
id: '',
cat: '',
code: '',
}
const button = (event: MouseEvent, vals: any, varname: string) => {
if (varname == 'b1') {
console.log('b1 ボタンが押されました');
}
if (varname == 'close') {
compoRef.destory();
}
}
const provider = TymFormComponent.provider(
vals, '', './assets/panel1.txt', opts, button
);
let compoRef = this.modal.open(TymFormComponent, provider);カスタマイズ
opts値を設定するとカスタマイズできます。
opts = {
zoom:'70%',
lineHeight16px:true,
borderColor:'transparent',
backgroundColor:'#fff',
}; - プロポーショナルフォントを利用する場合,
tabSizeを利用すると画面部を定義しやすくなります。
--- panel.txt ---
123456789+123456789+123456789+123456789+
プロポーショナルフォント\t[a\t]
proportional font\t[b\t]
[DEF]
a:font1:text:::::::
b:font2:text:::::::
--- end of file ---<ngx-tym-form #tymForm
[formTextUrl]="./panel.txt"
[opts]="{fontFamily: 'system-ui', tabSize: '25'}"
></ngx-tym-form>
応用
- 定義部を複数の画面部と共有する場合, 画面部 と 定義部 を別で用意し利用できます。
--- def.txt ---
[DEF]
a:tourokubi :date :::::::
b:id :text :::::::
c:cat :text :::::::
d:code :text :::::::
--- end of file ------ panel1.txt ---
パネル１
───────────────────────
登録日 [a ]
商品ID [b ]
--- end of file ------ panel2.txt ---
パネル２
───────────────────────
商品ID [b ]
商品区分 [c ] / 商品コード [d ]
--- end of file ---<ngx-tym-form #tymForm
[vals]="vals"
formTextUrl="./assets/def.txt"
></ngx-tym-form> :
import { TymFormComponent } from "tym-form";
:
@ViewChild("tymForm")
private tymForm?: TymFormComponent;
:
// パネルの切り替え実行
this.tymform!.formTextUrl = './assets/panel1.txt';
:
// パネルの切り替え実行
this.tymform!.formTextUrl = './assets/panel2.txt';comments
* supports angular 15, 16 and 17.ライセンス (License)
The components in tym-ng-ws are released under the MIT license. Read license.
Copyrights belong to shinichi tayama (shinichi.tym).