以编程方式设置表单的字段使表单无效

Question

在Ionic 3 / Angular 5应用中，我有一个由3个字段组成的表单：

• 名字（输入文字）
• 生日（日期选择器）
• 头像（单选按钮）

如果表单无效，则禁用提交按钮： [disabled]="!addChildForm.valid"

在初始化时，我检查用户是否正在创建一个新孩子或正在编辑一个孩子。 我编辑，然后以编程方式填充字段。 这可以正常工作，但是提交按钮处于非活动状态。 尽管出生日期填充良好，但我必须单击它以打开（并关闭）选择器以启用“提交”按钮。

我的代码：

createForm(child?: Child): void {

      this.addChildForm = this.formBuilder.group({
        firstnameInput: ['', Validators.required],
        birthdateInput: ['', Validators.required],
        avatarInput: ['', Validators.required]
      });

      // If we are editing a child, populate the form
      if (child) {
        this.addChildForm.setValue({
          firstnameInput: child.firstname,
          birthdateInput: moment(child.birthdate).format(),
          avatarInput: child.avatar
        });
      }
    }

知道如何在填充表单后以某种方式强迫表单进行检查以启用提交按钮吗？

Answer 1

无需构建表单， 然后再向其中填充数据，而是在构建步骤中进行检查，并一口气完成它。 像这样：

createForm(child?: Child): void {

  this.addChildForm = this.formBuilder.group({
    firstnameInput: [child ? child.firstname : '', Validators.required],
    birthdateInput: [child ? moment(child.birthdate).format() : '', Validators.required],
    avatarInput: [child ? child.avatar : '', Validators.required]
  });
}

这是带有工作示例的链接： https : //stackblitz.com/edit/angular-ygaoz7 。

尝试将示例中的this.child的初始值更改为空字符串，您将看到表单更改，并且提交按钮被禁用。 当它们都具有值时，将再次启用该按钮。