• Project
  • License
  • Angular の form について
    • リアクティブフォーム
      • 使用方法
      • form のデータ更新
      • form の validate
    • テンプレート駆動フォーム
      • 使用方法
  • 起動

Project

This project was generated with Angular CLI version 10.1.2.

License

MIT

Angular の form について

angular には 2 つのフォームスタイルがあり、それぞれ使用方法も思想も違います。 このレポジトリはそれぞれの使い方をまとめています。

リアクティブフォーム

使用方法

'@angular/forms' の提供する FormBuilder, FormControl, FormGroup を使用します。

• ① コンポーネントと HTML 要素の form を formGroup で指定し、リンクさせる
• ② formControlName を指定し、コンポーネントのフォーム属性とリンクさせる

<!-- ① using formGroup to link form with component --><formclass="form" [formGroup]="loginForm" (ngSubmit)="submit()"><!-- ② using formControlName to link form with component's attribute --><inputtype="email" placeholder="mail" formControlName="mail" required/><inputtype="password"
placeholder="Password"
formControlName="password"
required/></form>

• ③-1 フォームで使用する対象の属性を FormBuilder 経由で初期化する

// Using FormBuilder to link and initialize form valuespublicloginForm=this.builder.group({mail: [''],password: [''],});

• ③-2 フォームで使用する対象の属性を FormGroup, FormControl 経由で初期化する

// This also possible though it could be troublesome (using instance..)publicloginForm=newFormGroup({mail: newFormControl(''),password: newFormControl(''),});

form のデータ更新

• FormGroup のメソッド経由で値を更新する

// 特定の要素のみ値を更新する際には patchValue を使用するthis.loginForm.patchValue({mail: 'sample@example.com',});// すべての要素を更新する際には setValue を使用するthis.loginForm.setValue({mail: 'sample@example.com',password: 'password',});

form の validate

• formGroup で Validators 経由の validate をかける
• input 要素に required を追加する

// Validators 経由で Validate をかけるpublicloginForm=this.builder.group({mail: ['',Validators.email],// validates whether email format or notpassword: ['',Validators.required],// validates form filled or not});

<!-- html の input要素に require を追加 --><inputtype="email" placeholder="mail" formControlName="mail" required/><inputtype="password"
placeholder="Password"
formControlName="password"
required/>

テンプレート駆動フォーム

使用方法

html側、コンポーネント側双方での準備が必須。

• ① コンポーネントではデータバインドに使用する フォームのモデルを作成する
• ② ngForm を指定し、コンポーネントとリンクさせる, ngModel で コンポーネントで用意したモデルと関連付ける
• ③ viewChild を使用してformとしてフォームの入力値を参照、

// html 要素の参照
@ViewChild('form') form: NgForm;

<!-- ① using ngForm to link form with component --><formclass="form" #form="ngForm" (ngSubmit)="submit()"><!-- ② using ngModel to link value with component model --><inputtype="email"
placeholder="mail"
[(ngModel)]="model.mail"
name="mail"
#mail="ngModel"
requiredemail/></form>

form のデータ更新

• ngModel で指定したモデル経由で値を更新することができる

// model の値を更新this.model.mail='example@example.com';this.model.password='invalid-password';

form の validate

• バインドした form 経由で validate をかけたいフォーム要素の errors を確認する

  • 以下で説明する required,email を指定していた場合はその要素の errors を確認することで validateの結果を取得できる

• input 要素に required, email を追加する

  • required を追加することで必須要素であることをformに伝えることができる
  • email を追加することで email のパターンマッチングを行ってくれる

// 指定していた form要素を参照し、 付与したhtmlのvalidate結果を取得する(required,email)getemailInvalid(){returnthis.form?.form?.controls?.mail?.errors?.required ? true : false;}getemailPatternInvalid(){returnthis.form?.form?.controls?.mail?.errors?.email ? true : false;}// password の validate 結果の取得getpasswordInvalid(){returnthis.form?.form?.controls?.password?.errors?.required ? true : false;}

<!-- html の input要素に required,email を追加 --><inputtype="email"
placeholder="mail"
[(ngModel)]="model.mail"
name="mail"
#mail="ngModel"
requiredemail/><inputtype="password"
placeholder="password"
[(ngModel)]="model.password"
name="password"
#password="ngModel"
required/>

起動

ng serve で 起動します.