Angular tips(3)

Angular 復習

1. Form

Angularでは、通常のHTMLフォーム機能を拡張し、バリデーションなどを実装することができる。
例えば、input要素やtextarea要素には、HTML5の検証属性オーバライドしたものや拡張した検証属性をもつことができる。novalidate属性をつけるとHTML5の検証属性を無効可することができる。

属性	動作
required	入力必須
minlength	文字列の最小長
maxlength	文字列の最大長

検証結果は、

要素名.errors?.検証属性でtrueまたはfalseがかえり、*ngIf文でエラーメッセージを表示させたりできる。

検証エラーの場合は、フォーム名.invalidでtrueまたはfalseがかえり、フォーム全体がエラーかどうかをチェック、”送信ボタン”等の無効可、有効可をさせることができる。

入力状態プロパティ

入力要素単体で、フォーム全体で状態を管理できる。たとえば、変更が検知された場合は、リセットボタンを有効にするといったようなことができる。

要素名.pristine	変更なし
要素名.dirty	更新あり
要素名.touched	フォーカスがあった
要素名.untouched	フォーカスがなかった

また、上記のプロパティを示すスタイルクラスがあり、フォーカスが当たった場合にinput要素の色を変えるなどができる。

ng-vaild	入力値妥当
ng-invalid	入力値不正
ng-pristine	変更なし
ng-dirty	変更された
ng-touched	フォーカスがあたった
ng-untouched	フォーカスがなかった

2. Reactive Form

Reactiveフォームとは、コンポーネント側(typescript)で制御できるフォームのこと
ReactiveFormModule をAppModule.tsにインポートして使う。

price = new FormControl('',
    Vaildators.required,
    Validators.minLength(4)
);

<input id="price" [formControl]="price">

FormControlの仕様は、下記を参照。
https://angular.io/api/forms/FormControl

FormGroupオブジェクト

FormGroupを使うと、FormControlをまとめて管理することができる。

priceForm = this.builder.group({
    price:new FormControl('',
        Vaildators.required,
        Validators.minLength(4)
    )
});

<input id="price" [formControl]="priceForm.controls.price">