Question

我有一个Mat表单，其中已标记了一些必填字段，但是如果我填写表单并将必填字段留空，则不会引发错误。有人可以帮我弄清楚为什么验证没有抛出错误吗？

<form [formGroup]="indCustregisterForm">

  <div>
    <label>Name Type</label>
    <mat-select
      formControlName="nameType"
      [(ngModel)]="indCustNameType"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f.prefix.errors }"
    >
      <mat-option *ngFor="let obj of nameTypeSelection" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.nameType.errors" class="invalid-feedback">
      <div *ngIf="f.nameType.errors.required">Name Type is required</div>
    </div>
  </div>
  <div>
    <label>First Name</label>
    <input
      type="text"
      formControlName="firstName"
      [(ngModel)]="firstName"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }"
    />
    <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
      <div *ngIf="f.firstName.errors.required">First Name is required</div>
    </div>
  </div>
  <div>
    <label>Last Name</label>
    <input
      type="text"
      formControlName="lastName"
      [(ngModel)]="lastName"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }"
    />
    <div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
      <div *ngIf="f.lastName.errors.required">Last Name is required</div>
    </div>
  </div>

  <div>
    <label>Gender</label>
    <mat-select
      formControlName="gender"
      [(ngModel)]="gender"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && f.gender.errors }"
    >
      <mat-option *ngFor="let obj of genders" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && f.gender.errors" class="invalid-feedback">
      <div *ngIf="f.gender.errors.required">Gender is required</div>
    </div>
  </div>


  <div>
    <button class="btn btn-primary" (click)="saveIndCustData()">Save</button>
  </div>
</form>

打字稿代码：

 // For Form Individual Customer inside Mat-Stepper
  this.indCustregisterForm = this.formBuilder.group({
  prefix: ['', Validators.required],
  nameType: ['', Validators.required],
  firstName: ['', Validators.required],
  middleName: [''],
  lastName: ['', Validators.required],
  gender: ['', Validators.required],
  dateOfBirth: ['', Validators.required],
  citizenship: ['', Validators.required]
  });

此外，当我打开表单时，在控制台中收到以下警告。该怎么办？

It looks like you're using ngModel on the same form field as formControlName. 
Support for using the ngModel input property and ngModelChange event with 
reactive form directives has been deprecated in Angular v6 and will be removed 
in Angular v7.

Mat-form不会在必填字段上抛出错误

0 个答案: