Angular报Cannot find control with name: 'email'及FormGroup废弃提示如何解决

1. 运行报错「Cannot find control with name: 'email'」 #

错误原因 #

• email、confirmEmail控件是嵌套在emailGroup FormGroup下的子控件，模板中没有绑定父级formGroupName，Angular无法在根FormGroup中找到对应控件
• confirmEmail对应的input控件错误绑定了formControlName="email"，和实际声明的控件名不匹配

修复代码（模板部分） #

<!-- 在外层增加emailGroup的绑定 -->
<div formGroupName="emailGroup">
  <div class="form-group" [ngClass]="{'has-error': formErrors.email}">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-8">
      <input id="email" type="text" (blur)="logValidationErrors()" class="form-control"
          formControlName="email">
      <span class="help-block" *ngIf="formErrors.email">
          {{formErrors.email}}
      </span>
    </div>
  </div>
  <div class="form-group" [ngClass]="{'has-error': formErrors.confirmEmail || formErrors.emailGroup}">
    <label class="col-sm-2 control-label" for="confirmEmail">
        Confirm Email
    </label>
    <div class="col-sm-8">
      <!-- 修正formControlName为confirmEmail -->
      <input id="confirmEmail" type="text" class="form-control" (blur)="logValidationErrors()"
          formControlName="confirmEmail">
      <span class="help-block" *ngIf="formErrors.confirmEmail || formErrors.emailGroup">
          {{formErrors.confirmEmail ? formErrors.confirmEmail
          : formErrors.emailGroup}}
      </span>
    </div>
  </div>
</div>

2. FormGroup声明提示「The declaration was marked as deprecated here.」 #

错误原因 #

Angular 14及以上版本中，FormBuilder.group()方法传入自定义验证器的旧写法已废弃，原validator字段需要替换为validators字段，支持传入数组配置多个验证器。

修复代码（逻辑部分） #

this.employeeForm = this.fb.group({
  fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
  contactPreference: ['email'],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, CustomValidators.emailDomain('dell.com')]],
    confirmEmail: ['', [Validators.required]],
  // 替换validator为validators，传入数组格式
  }, { validators: [matchEmails] }),
  phone: [''],
  skills: this.fb.group({
    skillName: ['', Validators.required],
    experienceInYears: ['', Validators.required],
    proficiency: ['', Validators.required]
  }),
});

内容的提问来源于stack exchange，提问作者soham