Menu

フォームを作成する

<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にエラーがあるときにだけ表示することができる

参考

スポンサーリンク