以控制值为条件的 Angular 模型驱动验证器

Question

我目前正在使用formBuilder 定义模型驱动表单。在这个表单中有一个单选按钮。如果此单选按钮的值为true，那么我想显示其他输入，只有这样才需要。

如果收音机是false，那么额外的输入可以是空的，并且不能阻止表单提交。

这是表单生成器部分，我怎样才能使我的场景工作？

initDynamicForm() {
    let name = '';
    let moreData = false;
    let email = '';

    this.dynamicForm = this.formBuilder.group({
      name: [ name, Validators.required ],
      moreData: moreData,
      email: email // HERE: if moreData is true => must be required
    });
  }

关于如何根据moreData 值在email 输入上设置这个动态定义的Validators.required 有什么想法吗？

值得一提的是：dynamicForm 在*ngFor 循环中被调用了多次。因此我无法定义要使用的组件级属性，因为使用 dynamicForm“模板”的每个表单都必须独立工作。

Answer 1

如果可以接受，也许最简单的方法是在单选按钮为false 时禁用email 字段，因为这意味着电子邮件字段不会包含在表单中，因此不会影响有效性的形式。

所以我会放一个函数来检查单选按钮的值：

this.dynamicForm = this.formBuilder.group({
  name: ['', Validators.required ],
  moreData: [false, this.checkMoreData.bind(this)]
  email: ['', Validators.required] 
});

然后是函数：

checkMoreData(control: FormControl) {
  if(control.value == true) {
    this.myForm.get('email').enable()
  }
  // we have to check if myForm is not undefined (since it will be upon initialization)
  // also check if the control is not undefined
  else if (this.myForm && control) {
    this.myForm.get('email').disable()
  }
}

最后，如果您确实需要获取所有字段，无论是否禁用，您都可以使用getRawValue，其中还包括任何禁用的字段。

Demo