Ionic3/Angular5编程填充表单后表单仍无效问题求助

这个问题我之前在开发Angular表单时也碰到过——手动通过代码填充表单值后，Angular并不会自动触发表单的校验状态更新，所以即使所有字段都有有效值，表单的valid属性还是保持初始的false，导致绑定了[disabled]="!addChildForm.valid"的提交按钮依然处于禁用状态。

这里有两个简单有效的解决办法：

方法一：调用updateValueAndValidity()强制更新校验状态 #

在完成表单值的填充后，对整个表单组调用updateValueAndValidity()方法，它会重新计算表单所有控件的校验状态，并通知相关的状态订阅者（比如按钮的disabled绑定）。修改你的代码如下：

createForm(child?: Child): void {
  this.addChildForm = this.formBuilder.group({
    firstnameInput: ['', Validators.required],
    birthdateInput: ['', Validators.required],
    avatarInput: ['', Validators.required]
  });
  // 如果是编辑儿童信息，填充表单
  if (child) {
    this.addChildForm.setValue({
      firstnameInput: child.firstname,
      birthdateInput: moment(child.birthdate).format(),
      avatarInput: child.avatar
    });
    // 强制更新整个表单的校验状态
    this.addChildForm.updateValueAndValidity();
  }
}

如果你只想针对单个控件更新状态，也可以对每个控件单独调用这个方法：

this.addChildForm.get('firstnameInput').updateValueAndValidity();
this.addChildForm.get('birthdateInput').updateValueAndValidity();
this.addChildForm.get('avatarInput').updateValueAndValidity();

方法二：调用markAllAsTouched()标记所有控件为已触摸 #

这个方法会将表单组内的所有控件都标记为“已触摸”状态，Angular会因此重新触发校验逻辑，同时更新表单的valid状态。代码修改如下：

createForm(child?: Child): void {
  this.addChildForm = this.formBuilder.group({
    firstnameInput: ['', Validators.required],
    birthdateInput: ['', Validators.required],
    avatarInput: ['', Validators.required]
  });
  // 如果是编辑儿童信息，填充表单
  if (child) {
    this.addChildForm.setValue({
      firstnameInput: child.firstname,
      birthdateInput: moment(child.birthdate).format(),
      avatarInput: child.avatar
    });
    // 标记所有控件为已触摸，触发校验
    this.addChildForm.markAllAsTouched();
  }
}

这个方法特别适合你的场景，因为它不仅能更新表单的valid状态启用按钮，还能让表单的错误提示（如果有的话）正常显示，和用户手动交互后的效果一致。

为什么原来的代码会出现问题？ #

Angular表单的校验状态默认只会在用户与控件交互（比如输入文本、选择日期）时才会更新，手动通过setValue或patchValue赋值只是修改了控件的值，但没有触发校验状态的重新计算，所以表单的valid属性依然是初始的false，按钮自然不会启用。

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