Angular 6 + Angular Material - 提交时的表单验证

Question

我有一些输入字段，上面设置了不同的验证规则。但是我也想在提交时一次向所有字段添加一些验证，或者如果上面有任何错误，则禁用提交按钮。

但是，我从一开始就没有将所有输入都放在表单标签中，现在遇到了一些麻烦。我对这一切都很陌生，所以你能帮我吗？有没有办法解决它，而无需重新创建所有表单？:(

我试过添加：

  <form #stepOneForm="ngForm">

  <button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>

但它没有帮助...

我的代码如下所示：

HTML

      <!-- Name -->
      <mat-form-field class="dcp-input-field">
        <input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">
        <mat-hint>Please enter your name</mat-hint>

        <mat-error *ngIf="name.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
      </mat-form-field>

      <!-- DoB -->
      <mat-form-field class="dcp-input-field">
        <input matInput [matDatepicker]="dp" placeholder="Date of Birth" [formControl]="dob" [errorStateMatcher]="matcher">
        <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
        <mat-datepicker #dp></mat-datepicker>
        <mat-hint>Please enter your date of birth</mat-hint>

        <mat-error *ngIf="dob.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
      </mat-form-field>

      <!-- PolicyNo -->
      <mat-form-field class="dcp-input-field">
        <input matInput placeholder="Policy number" [formControl]="policyNo" [errorStateMatcher]="matcher">
        <mat-hint>Please enter your Policy number</mat-hint>

        <mat-error *ngIf="policyNo.hasError('required')">
          This is <strong>required</strong> field
        </mat-error>
        <mat-error *ngIf="policyNo.hasError('minlength')">
          The value is <strong>too short</strong>
        </mat-error>
      </mat-form-field>

TS

 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
     form: FormGroupDirective | NgForm | null
   ): boolean {
     const isSubmitted = form && form.submitted;
     return !!(
       control &&
       control.invalid &&
       (control.dirty || control.touched || isSubmitted)
     );
   }
 }


  name = new FormControl("", [Validators.required]);
  dob = new FormControl("", [Validators.required]);
  policyNo = new FormControl("", [
    Validators.required,
    Validators.minLength(6)
  ]);

  matcher = new MyErrorStateMatcher();

谢谢你，对不起菜鸟的问题！;)

Answer 1

HTML
包装所有您输入的form标签

，而不是

<form #stepOneForm="ngForm">

做

<form (ngSubmit)="onSubmit()" [formGroup]="myForm"></form>

反而

<input matInput placeholder="Name" [formControl]="name" [errorStateMatcher]="matcher">

做

<input matInput placeholder="Name" formControlName="name">

所有输入formControlName都不是[formControl]

反而

<button type="submit [disabled]="!stepOneForm.form.valid" mat-button matStepperNext>Go to next step</button>

做

<button type="submit" [disabled]="myForm.invalid" mat-button matStepperNext>Go to next step</button>

-当你想显示错误味精访问输入错误的验证
，而不是

name.hasError('required')

做

myForm.get('name').errors?.required
//or
myForm.get('name').errors['required']

检查错误的两种方法都可以使用它们之间的主要区别safe navigation operator (?.)，就像您说“如果有错误（不是 unll 或未定义），则首先检查 hay 角度，然后检查所需的错误类型，maxLength ...等”的主要目的是防止 javascript从提高cannot read property参考安全导航操作员的错误

或（另一个验证案例）

*ngIf="myForm.get('name').invalid && myForm.get('name').touched"

TS

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...']
})
export class myApp implements OnInit {
  myForm: FormGroup;

  ngOninit() {
    this.myForm = new FormGroup({
      'name': new FormControl(null, Validators.required),
      'policyNo': new FormControl(null, validators.minLength(5))
      // the rest of inputs with the same approach
    });
  }

  onSubmit() {
    // when submit the form do something
  }
}

你在这里使用reactive forms不template driven每个人都有不同的使用确保您使用正确的方法两种，因为你的乱reactive approach用template driven approach什么搞砸一切。推荐阅读Reqctive Froms 模板表格