フォームを作成する

<form #userForm="ngForm" novalidate>
...
</form>

フォームに名前をつける

#userForm="ngForm"

novalidateをつける

novalidate

submitボタンを作成する

<button [disabled]="! userForm.valid" (click)="onSubmit(userForm)">保存</button>

disabled属性にtrue/falseをバインドする

[disabled]="! userForm.valid"

クリックイベントでフォームデータを渡す

(click)="onSubmit(userForm)"

あるいは次のようにも書ける。

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm) novalidate>

コントロールを作成する

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

コントロールに名前をつける

#nameInput="ngModel"

validationを定義する

required

エラー表示の枠を作成する

<div *ngIf="! nameInput.valid">
...
</div>

エラーの内容を表示する

<label *ngIf="nameInput.errors.required" for="name">入力必須</label>

参考

Last-modified: 2016-11-18 (金) 14:31:38 (1038d)