This project was generated with Angular CLI version 10.1.2.
MIT
angular には 2 つのフォームスタイルがあり、それぞれ使用方法も思想も違います。 このレポジトリはそれぞれの使い方をまとめています。
'@angular/forms' の提供する FormBuilder, FormControl, FormGroup を使用します。
- ① コンポーネントと HTML 要素の form を formGroup で指定し、リンクさせる
- ② formControlName を指定し、コンポーネントのフォーム属性とリンクさせる
<!-- ① using formGroup to link form with component --> <form class="form" [formGroup]="loginForm" (ngSubmit)="submit()"> <!-- ② using formControlName to link form with component's attribute --> <input type="email" placeholder="mail" formControlName="mail" required /> <input type="password" placeholder="Password" formControlName="password" required /> </form>- ③-1 フォームで使用する対象の属性を FormBuilder 経由で初期化する
// Using FormBuilder to link and initialize form values public loginForm = this.builder.group({ mail: [''], password: [''], });- ③-2 フォームで使用する対象の属性を FormGroup, FormControl 経由で初期化する
// This also possible though it could be troublesome (using instance..) public loginForm = new FormGroup({ mail: new FormControl(''), password: new FormControl(''), });- FormGroup のメソッド経由で値を更新する
// 特定の要素のみ値を更新する際には patchValue を使用する this.loginForm.patchValue({ mail: 'sample@example.com', }); // すべての要素を更新する際には setValue を使用する this.loginForm.setValue({ mail: 'sample@example.com', password: 'password', });- formGroup で Validators 経由の validate をかける
- input 要素に required を追加する
// Validators 経由で Validate をかける public loginForm = this.builder.group({ mail: ['', Validators.email], // validates whether email format or not password: ['', Validators.required], // validates form filled or not });<!-- html の input要素に require を追加 --> <input type="email" placeholder="mail" formControlName="mail" required /> <input type="password" placeholder="Password" formControlName="password" required />html側、コンポーネント側双方での準備が必須。
- ① コンポーネントではデータバインドに使用する フォームのモデルを作成する
- ② ngForm を指定し、コンポーネントとリンクさせる, ngModel で コンポーネントで用意したモデルと関連付ける
- ③ viewChild を使用してformとしてフォームの入力値を参照、
// html 要素の参照 @ViewChild('form') form: NgForm;<!-- ① using ngForm to link form with component --> <form class="form" #form="ngForm" (ngSubmit)="submit()"> <!-- ② using ngModel to link value with component model --> <input type="email" placeholder="mail" [(ngModel)]="model.mail" name="mail" #mail="ngModel" required email /> </form>- ngModel で指定したモデル経由で値を更新することができる
// model の値を更新 this.model.mail = 'example@example.com'; this.model.password = 'invalid-password';-
バインドした form 経由で validate をかけたいフォーム要素の errors を確認する
- 以下で説明する required,email を指定していた場合はその要素の errors を確認することで validateの結果を取得できる
-
input 要素に required, email を追加する
- required を追加することで必須要素であることをformに伝えることができる
- email を追加することで email のパターンマッチングを行ってくれる
// 指定していた form要素を参照し、 付与したhtmlのvalidate結果を取得する(required,email) get emailInvalid() { return this.form?.form?.controls?.mail?.errors?.required ? true : false; } get emailPatternInvalid() { return this.form?.form?.controls?.mail?.errors?.email ? true : false; } // password の validate 結果の取得 get passwordInvalid() { return this.form?.form?.controls?.password?.errors?.required ? true : false; }<!-- html の input要素に required,email を追加 --> <input type="email" placeholder="mail" [(ngModel)]="model.mail" name="mail" #mail="ngModel" required email /> <input type="password" placeholder="password" [(ngModel)]="model.password" name="password" #password="ngModel" required />ng serve で 起動します.