FormControl上的 setvalidator不会使表单无效

Question

HTML代码

<div>
<label for=""
>No additional information flag:</label>
<rca-checkbox formControlName="noAdditionalInfoCheckbox"  (checkboxChecked)="onCheckboxChecked($event)"></rca-checkbox>
</div>
<div>
<label >No additional information reasons:</label>
<textarea
formControlName="noAdditionalInformationReasons"
id=""
class="form-control"
></textarea>
</div>

TS文件

onCheckboxChecked(isChecked): void {

const noAdditionalInfoReasonsControl = this.addNewRequestFormForIndividual.get('noAdditionalInformationReasons');
if (isChecked){

noAdditionalInfoReasonsControl.setValidators(Validators.required);
this.noAddInfoReasonsErrorMessage = "give reason";
}
else {


noAdditionalInfoReasonsControl.clearValidators;
this.noAddInfoReasonsErrorMessage = '';
}

noAdditionalInfoReasonsControl.updateValueAndValidity;

console.log(this.addNewRequestFormForIndividual.valid);

}

如果复选框被选中，我想向第二个FormControl添加一个所需的验证器，并且如果表单无效，则表单上的add按钮将被禁用。

现在我看到的是，即使我设置了上面的验证器并且没有禁用Add按钮，最后一个控制台也打印为真。此外，我看到，当我开始修改的字段是必需的，然后验证状态开始改变，就像我写了一些东西在必需的字段，然后删除它，然后添加按钮被禁用，表单状态变得无效。

但是，如果我取消选中复选框，表单仍然无效。我想了解为什么即使我使用updateValueAndValidity也会发生这种情况。

Answer 1

clearValidators和updateValueAndValidity为方法。你错过了()，所以两个方法都没有被调用。添加()以便如下所示调用该方法:

noAdditionalInfoReasonsControl.clearValidators();

noAdditionalInfoReasonsControl.updateValueAndValidity();

Demo @ StackBlitz