フォームを作成する†
<form #userForm="ngForm" novalidate> ... </form>
フォームに名前をつける†
#userForm="ngForm"
- userFormが名前になる
- ngFormは固定、こういうもの
novalidateをつける†
novalidate
- novalidateは、Angular2でvalidateするからHTML5でしないでねということ
- 属性requiredが被っていて、HTML5の機能が邪魔になるので
submitボタンを作成する†
<button [disabled]="! userForm.valid" (click)="onSubmit(userForm)">保存</button>
disabled属性にtrue/falseをバインドする†
[disabled]="! userForm.valid"
- ng-reflect-disabled="true"を介して（？）、disabled属性が追加される
- ng-reflect-disabled="false"を介して（？）、disabled属性が削除される
- 名前をつけたフォーム.validでフォームとしてvalidationをパスしているかが分かる
クリックイベントでフォームデータを渡す†
(click)="onSubmit(userForm)"
あるいは次のようにも書ける。
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm) novalidate>
- 名前をつけたフォームを渡すことができる
- (form: NgForm)として受けたonSubmitで
- form.validでvalidationをパスしているかが分かる
- form.valueで各入力値を取得できる
コントロールを作成する†
<input type="text" placeholder="Name" [(ngModel)]="user.name" name="name" #nameInput="ngModel" required> <div *ngIf="! nameInput.valid"> <label *ngIf="nameInput.errors.required" for="name">入力必須</label> </div>
ngModelにはname属性が必要†
[(ngModel)]="user.name" name="name"
- [(ngModel)]="user.name"で双方向バインディングする（単方向で済むならそれでも）
- name属性を必ずつける
- フォームの値 form.value.name として取得できる
コントロールに名前をつける†
#nameInput="ngModel"
- nameInputが名前になる
- フォームに名前をつけるのと同様
validationを定義する†
required
- 属性として記述する
- required、minlength、maxlength、patternがある
エラー表示の枠を作成する†
<div *ngIf="! nameInput.valid"> ... </div>
- 名前をつけたコントロール.validでそのコントロールがvalidationをパスしているかが分かる
- *ngIfでそのコントロールにエラーがあるときにだけ表示する枠を作成できる
エラーの内容を表示する†
<label *ngIf="nameInput.errors.required" for="name">入力必須</label>
- 名前をつけたコントロール.errors.requiredで必須チェックエラーかどうかが分かる
- バリデーションの種類required、minlength、maxlength、patternでそれぞれ
- *ngIfでそのvalidationにエラーがあるときにだけ表示することができる