角与材料无角形式，面对错误

Question

我的工作角度反应形式与角料，但得到一个错误，在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)

Answer 1

您从confirm组，从而错误排除userData formcontrol，应该是formgroup里面，因为你已经将其标记为这样的，所以...

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