Question

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

如果广播是false，则附加输入可以为空，且不得阻止表单提交。

以下是formbuilder部分，如何让我的场景工作？

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
    });
  }

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

事实上：在dynamicForm循环中多次调用*ngFor。因此，我无法定义要使用的组件级别属性，因为使用dynamicForm“template”的每个表单必须独立工作。

Answer 1

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

所以我放了一个函数，它检查单选按钮的值：

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，其中还包括所有已停用的字段。

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

1 个答案:

Demo