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">