Angular10 FormGroup赋值后仍提示必填校验无效问题求助

问题核心原因 #

• FormGroup变量名不统一：组件中定义的表单实例名为personalForm，但模板绑定用的是personalSaveForm，保存方法中校验的也是personalSaveForm，两者完全没有关联，表单实例实际没有绑定到视图，内部的控件值永远为空。
• 赋值方式不符合响应式表单规则：你直接给普通变量name、email赋值，再通过value="{{name}}"绑定到输入框，这种方式只能修改视图展示的值，不会同步到FormGroup的内部状态，表单控件的实际值还是初始化的空字符串，自然触发必填校验。
• 模板绑定错误：邮箱输入框的formControlName错写为name，两个输入框都绑定到了name控件，email控件完全没有绑定赋值，永远是空值。
• 冗余校验属性：响应式表单已经在FormControl中声明了Validators.required，不需要再在模板的input标签上加原生required属性，容易造成原生校验和Angular校验冲突。

修复方案 #

第一步：统一表单变量名

组件中调整FormGroup定义的变量名，和模板、保存方法保持一致：

export class PersonalComponent implements OnInit {
  // 把原来的personalForm改成personalSaveForm，和调用处对齐
  personalSaveForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required,
      Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")])
    });
  // 可以删除无用的普通变量name、email
  public submitted = false;

第二步：修改赋值逻辑，直接给FormGroup赋值

在getPersonalData拿到接口返回数据后，用patchValue同步给表单：

getPersonalData() {
  this.activatedRoute.params.subscribe(prm => {
      this.service.getPersonal(prm['id']).subscribe(data => {
        // 直接给表单实例赋值，不要赋值给普通变量
        this.personalSaveForm.patchValue({
          name: data.name,
          email: data.email
        })
      },
        err => {
          console.log(err);
        });
  })
}

第三步：修复模板绑定错误

删除input的value绑定和原生required属性，修正邮箱的formControlName，提交事件传递正确的表单值：

<form [formGroup]="personalSaveForm" (ngSubmit)="onSave(personalSaveForm.value)">
 <div class="col-sm-3">
            <label for="name" class="col-form-label">Name</label>
          </div>
          <div class="col-sm-3">
            <input type="text" id="name" [ngClass]="{'form-submitted': submitted}" formControlName="name" class="form-control" />
          </div>

 <div class="col-sm-3">
            <label for="email" class="col-form-label">Email</label>
          </div>
          <div class="col-sm-3">
            <input type="text" id="email" [ngClass]="{'form-submitted': submitted}" formControlName="email" class="form-control" />
          </div>

      <div class=" col-sm-12 align-items-right">
        <button type="submit" id="btnSave" class="btn btn-primary" style="float: right;">Next</button>
      </div>
</form>

第四步：调整保存方法逻辑

直接用统一后的表单实例做校验即可：

onSave(form: Personal) {
    this.submitted = true;
    if (this.personalSaveForm.valid) {
      this.service.postPersonal(form).subscribe(data => {
        console.log('saved');
      },
        err => {
          console.log(err);
        });
    }
  }

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