tym-form
は,シンプルなform表示の angular
コンポーネントです。
表示サンプル (Display image)
動作イメージ (Demo screen)
[https://shinichi-tym.github.io/tym-ng-ws-demo/index.html#tym-form]
次のコマンド実行します。
npm install tym-form
表示される場所に<ngx-tym-form>
タグを作成します。
<ngx-tym-form #tymForm
[vals]="vals"
formTextUrl="./assets/panel1.txt"
></ngx-tym-form>
表示する画面データを文字列 または テキストファイルとして用意します。
パネル1
───────────────────────
登録日 [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';
- 基本機能 (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
パネル1
───────────────────────
登録日 [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
,bgColor
-
type: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 ---
パネル1
───────────────────────
登録日 [a ]
商品ID [b ]
--- end of file ---
--- panel2.txt ---
パネル2
───────────────────────
商品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';
* supports angular 16, 17 and 18.
The components in tym-ng-ws are released under the MIT license. Read license.
Copyrights belong to shinichi tayama (shinichi.tym).