时间戳

首页 > 解决方案 > 具有角反应形式的角材料，面临错误

angular - 具有角反应形式的角材料，面临错误

问题描述

我正在使用角材料处理角反应形式，但出现一个错误，它在 stackblitz 中工作正常，但在我的本地机器中却没有。它显示带有“确认”的控制是未定义的。我无法弄清楚它为什么显示。

 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)

标签： angularangular-reactive-forms

解决方案

您已从您的组中排除confirm了 formcontrol userData，因此错误，它应该在该 formgroup 内，因为您已将其标记为这样，所以......

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

推荐阅读