仅在DOM

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

如果您希望采用被动方式，则可能需要在应用运行时添加和删除验证器。首先订阅更改：

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()。

Answer 2

使用*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)
  });
}