開始行: * フォームを作成する [#v2233508] <form #userForm="ngForm" novalidate> ... </form> ** フォームに名前をつける [#r42af26f] #userForm="ngForm" - userFormが名前になる - ngFormは固定、こういうもの ** novalidateをつける [#kdf7d01f] novalidate - novalidateは、Angular2でvalidateするからHTML5でしないで... -- 属性requiredが被っていて、HTML5の機能が邪魔になるので * submitボタンを作成する [#o8d06dff] <button [disabled]="! userForm.valid" (click)="onSubmit(... ** disabled属性にtrue/falseをバインドする [#qc49480e] [disabled]="! userForm.valid" - ng-reflect-disabled="true"を介して(?)、disabled属性... - ng-reflect-disabled="false"を介して(?)、disabled属性... - 名前をつけたフォーム.validでフォームとしてvalidationを... ** クリックイベントでフォームデータを渡す [#dad7aca8] (click)="onSubmit(userForm)" あるいは次のようにも書ける。 <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm) ... - 名前をつけたフォームを渡すことができる - (form: NgForm)として受けたonSubmitで -- form.validでvalidationをパスしているかが分かる -- form.valueで各入力値を取得できる * コントロールを作成する [#na86e98a] <input type="text" placeholder="Name" [(ngModel)]="user.name" name="name" #nameInput="ngModel" required> <div *ngIf="! nameInput.valid"> <label *ngIf="nameInput.errors.required" for="name">入... </div> ** ngModelにはname属性が必要 [#h9cad7f1] [(ngModel)]="user.name" name="name" - [(ngModel)]="user.name"で双方向バインディングする(単方... - name属性を必ずつける -- フォームの値 form.value.name として取得できる ** コントロールに名前をつける [#hb12ddb7] #nameInput="ngModel" - nameInputが名前になる - フォームに名前をつけるのと同様 ** validationを定義する [#o06d9492] required - 属性として記述する - required、minlength、maxlength、patternがある ** エラー表示の枠を作成する [#mb66d9e2] <div *ngIf="! nameInput.valid"> ... </div> - 名前をつけたコントロール.validでそのコントロールがvalid... - *ngIfでそのコントロールにエラーがあるときにだけ表示する... ** エラーの内容を表示する [#a4ddde70] <label *ngIf="nameInput.errors.required" for="name">入力... - 名前をつけたコントロール.errors.requiredで必須チェック... - バリデーションの種類required、minlength、maxlength、pat... - *ngIfでそのvalidationにエラーがあるときにだけ表示するこ... * 参考 [#e0d0cc1e] - [[Angular2 Forms - Submit Button Disabled? - Stack Over... 終了行: * フォームを作成する [#v2233508] <form #userForm="ngForm" novalidate> ... </form> ** フォームに名前をつける [#r42af26f] #userForm="ngForm" - userFormが名前になる - ngFormは固定、こういうもの ** novalidateをつける [#kdf7d01f] novalidate - novalidateは、Angular2でvalidateするからHTML5でしないで... -- 属性requiredが被っていて、HTML5の機能が邪魔になるので * submitボタンを作成する [#o8d06dff] <button [disabled]="! userForm.valid" (click)="onSubmit(... ** disabled属性にtrue/falseをバインドする [#qc49480e] [disabled]="! userForm.valid" - ng-reflect-disabled="true"を介して(?)、disabled属性... - ng-reflect-disabled="false"を介して(?)、disabled属性... - 名前をつけたフォーム.validでフォームとしてvalidationを... ** クリックイベントでフォームデータを渡す [#dad7aca8] (click)="onSubmit(userForm)" あるいは次のようにも書ける。 <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm) ... - 名前をつけたフォームを渡すことができる - (form: NgForm)として受けたonSubmitで -- form.validでvalidationをパスしているかが分かる -- form.valueで各入力値を取得できる * コントロールを作成する [#na86e98a] <input type="text" placeholder="Name" [(ngModel)]="user.name" name="name" #nameInput="ngModel" required> <div *ngIf="! nameInput.valid"> <label *ngIf="nameInput.errors.required" for="name">入... </div> ** ngModelにはname属性が必要 [#h9cad7f1] [(ngModel)]="user.name" name="name" - [(ngModel)]="user.name"で双方向バインディングする(単方... - name属性を必ずつける -- フォームの値 form.value.name として取得できる ** コントロールに名前をつける [#hb12ddb7] #nameInput="ngModel" - nameInputが名前になる - フォームに名前をつけるのと同様 ** validationを定義する [#o06d9492] required - 属性として記述する - required、minlength、maxlength、patternがある ** エラー表示の枠を作成する [#mb66d9e2] <div *ngIf="! nameInput.valid"> ... </div> - 名前をつけたコントロール.validでそのコントロールがvalid... - *ngIfでそのコントロールにエラーがあるときにだけ表示する... ** エラーの内容を表示する [#a4ddde70] <label *ngIf="nameInput.errors.required" for="name">入力... - 名前をつけたコントロール.errors.requiredで必須チェック... - バリデーションの種類required、minlength、maxlength、pat... - *ngIfでそのvalidationにエラーがあるときにだけ表示するこ... * 参考 [#e0d0cc1e] - [[Angular2 Forms - Submit Button Disabled? - Stack Over... ページ名: