Angular 具有 Angular 反应形式的材料，面临错误

Question

我正在使用 angular material 处理 angular 反应式表单，但遇到一个错误，它在 stackblitz 中工作正常，但在我的本地机器上却不行。它用 "confirm" 显示某些控件是未定义的。我不明白为什么会显示它。

 formControlName="confirm" shows error






 <form class="flex flex-column flex-row-ns flex-wrap mt2" [formGroup]="emailForm" (ngSubmit)="onSubmit();"> 


<mat-form-field class="w-50-ns pr2-ns" formGroupName="userData">
    <mat-label>Email</mat-label>
    <input matInput type="email" placeholder=" Email address" formControlName="email" (blur)="suggestEmail()" />
    <mat-error *ngIf="f.invalid && f.touched && (f.errors?.email || f.errors?.required)">
      Please enter a valid email address
    </mat-error>
    <mat-error (click)="clickme()" *ngIf="f.invalid && f.touched && f.errors?.has_suggestion">
      Do you mean:
      <span class="text-color"> {{suggestedEmail}} </span>
    </mat-error>
  </mat-form-field>

          <mat-form-field class="w-50-ns pr2-ns">
              <mat-label>Confirm Email</mat-label>
              <input matInput type="text" formControlName="confirm" placeholder="confirm your email address" />
              <mat-error *ngIf="submitted && (isEmailMismatch || f.confirm?.errors)" class="invalid-feedback">
                  <mat-error *ngIf="f.touched && f.confirm?.errors.required">Confirm Email is required</mat-error>
                  <mat-error *ngIf="f.touched && isEmailMismatch">Emails must match</mat-error>
              </mat-error>
            </mat-form-field>
    </form>

下面是ts文件

 submitted = false;
  public emailForm: FormGroup;
  suggestedEmail: string;
  email = new FormControl();
  confirm = new FormControl();

  constructor(private fb: FormBuilder) {
    super();
    this.emailForm = this.fb.group({

      userData: this.fb.group({
        email: [null, [Validators.required, Validators.email]],
        confirm: [null, [Validators.required, Validators.email]],
      }, {
          validator: (form: FormGroup) => { return form.get('email').value !== form.get('confirm').value ? { emailMismatch: true } : null }
        })
    });
  }

我面临的错误是

ERROR Error: Cannot find control with name: 'confirm'
    at _throwError (forms.js:2094)
    at setUpControl (forms.js:2002)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5168)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5769)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5690)
    at checkAndUpdateDirectiveInline (core.js:20661)
    at checkAndUpdateNodeInline (core.js:21929)
    at checkAndUpdateNode (core.js:21891)
    at debugCheckAndUpdateNode (core.js:22525)
    at debugCheckDirectivesFn (core.js:22485)

Answer 1

您已将 confirm formcontrol 从您的 userData 组中排除，因此错误应该是 inside 该表单组，因为您已将其标记为如此，如此...

<div formGroupName="userData">
  <input matInput formControlName="email" />
  <input matInput formControlName="confirm"  />
</div>

Angular 具有 Angular 反应形式的材料，面临错误

Angular materials with Angular Reactive form, facing error

angular

angular-reactive-forms