只有在 DOM 中才需要 Angular 2+ 响应式表单输入

Question

我目前正在使用 *ngIf 动态生成表单输入，如果此表单在 DOM 中输入我们，则它是必需的输入，但如果不是，则不需要。

如何使用反应式表单方法实现这一点？

HTML

<select formControlName="input" name="input">
   <option value="1">1</option>
   <option value="2">2</option>
</select>

<div *ngIf="input === '2'">
   <textarea formControlName="inputDynamic" name="inputDynamic" type="text"></textarea>
</div>

组件

initApplicants() {
  return this.fb.group({  
    input: ['', Validators.required],
    inputDynamic: ['', Validators.required]
  });
}

如果您需要更多详细信息，请告诉我。

Answer 1

使用*ngIf 输入将被再次加载/删除，因此是使用模板进行验证的更好方法。

在这样的元素中设置必需：

<div *ngIf="input === '2'">
   <textarea required formControlName="inputDynamic" name="inputDynamic" type="text"></textarea>
</div>

并从组件中移除：

initApplicants() {
  return this.fb.group({  
    input: ['', Validators.required],
    inputDynamic: ['', Validators.required] <===== Remove required from here (used in template)
  });
} 

Answer 2

如果您想保持响应式方法，您可能希望在应用运行时添加和删除验证器。先订阅更改：

this.formName.controls['input'].valueChanges().subscribe(value => {
    if (value === 2) {
        //remove validators
    } else {
        //add validators
    }
});

this.formName.controls['controlName'].setValidators(null) 将删除验证器。 this.formName.controls['controlName'].setValidators(Validators.required) 将添加验证器。

完成这些操作后不要忘记致电this.formName.controls['controlName'].updateValueAndValidity()。