web-dev-qa-db-ja.com

Angular Material Form Validation

私のFormGroupのフィールドがモデルにバインドされている場合は、[（ngModel）]であり、ページの読み込み時に入力されます。サービスのため、[disabled]="biodataForm.status !== 'VALID'"で保護されている送信ボタンが無効になりません。フォームが空白になり、通常どおり入力した場合、フォームが正しく入力されるとガードが通過します。データバインディングを通じてまったく同じ値が入力された場合、biodataForm.status値は、すべてのフィールドの値がIchangeされるまで無効のままです。

データバインディングが入力された後、フォームは有効なコンテンツがあることをフォームが認識し、その結果、ステータスがINVALIDからVALIDに変化するはずだと思います...ここで何が問題になっていますか？

私のフォームのマークアップは次のようになります：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required
        [formControl]="phoneFormControl">
      <mat-error *ngIf="phoneFormControl.invalid">{{getPhoneErrorMessage()}}</mat-error>
    </mat-form-field>        
    <button mat-raised-button color="primary" 
      class="submit-button"
      [disabled]="biodataForm.status !== 'VALID'"
      (click)="handleNext()">Next Step</button>
  </form>

「」

私のAngularこのフォームを囲むコンポーネントは次のようになります（詳細を明確にするために省略、完全なソースは here ））：

export class WelcomeComponent {
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);
  firstnameFormControl = new FormControl('', [Validators.required]);
  lastnameFormControl = new FormControl('', [Validators.required]);
  phoneFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern(/(\(?[0-9]{3}\)?-?\s?[0-9]{3}-?[0-9]{4})/)
  ]);
  // addressFormControl = new FormControl('', [Validators.required]);
  biodataForm: FormGroup = new FormGroup({
    email: this.emailFormControl,
    firstname: this.firstnameFormControl,
    lastname: this.lastnameFormControl,
    phone: this.phoneFormControl
    // address: this.addressFormControl
  });

  getEmailErrorMessage() {
    return this.emailFormControl.hasError('required') ? 'You must enter a value' :
      this.emailFormControl.hasError('email') ? 'Not a valid email' : '';
  }
  getPhoneErrorMessage() {
    return this.phoneFormControl.hasError('required') ? 'You must enter a value' :
      this.phoneFormControl.hasError('pattern') ? 'Format must be (xxx) xxx-xxxx' : '';
  }
  getRequiredErrorMessage(field) {
    return this.biodataForm.get(field).hasError('required') ? 'You must enter a value' : '';
  }

  constructor(
    public _memberdata: MemberDataService,
    private _api: ApiService,
    private _router: Router,
    private _snackBar: MatSnackBar) { }

  handleNext() {
     // ... handle button click
  }
}

「」

formsvalidationangular5angular-material2
3
vicatcu

フォーム自体は、有効および無効でチェックできます。以下はうまくいくはずです：

[disabled]="biodataForm.invalid"

Angularフォームグループに関する情報は、次の場所にあります https://angular.io/api/forms/FormGroup

さらに、電子メールと電話の入力... [（value）]を使用しています...これらを[（ngModel）]に変更すると、期待どおりに機能するはずです。

1
jdgower