在执行单击事件之前更新单选按钮值



我遇到了一个问题,在设置或清除特定验证器的单选按钮上的单击事件在值实际更改之前进行。

如果单击Yes单选按钮,我想切换它显示的附加字段的验证器。如果没有,我想清除它隐藏的附加字段的验证器。它通过*ngIf正确地显示和隐藏字段,但验证器方法在值更改之前执行。因此,第一次值未定义时,然后每次都显示更改前的值。

以下示例。模板片段。

<input type="radio" formControlName="infraRadio" [value]="1" (click)="radioSetValidator(changeForm.get('changeAssessmentFG.infraRadio'),[changeForm.get('changeAssessmentFG.newInfrastructure')])">Yes
<input type="radio" formControlName="infraRadio" [value]="0" (click)="radioSetValidator(changeForm.get('changeAssessmentFG.infraRadio'),[changeForm.get('changeAssessmentFG.newInfrastructure')])">No

<textarea class="form-control" rows="2" formControlName="newInfrastructure" style="width:100%"
*ngIf="changeForm.get('changeAssessmentFG.infraRadio').value=='1'"> </textarea>

组件类中的方法:

radioSetValidator(c: FormControl, d: [FormControl]) {
if (+c.value === 1) {
d.forEach(element => {
element.setValidators(Validators.required);
});
} else {
d.forEach(element => {
element.clearValidators();
});
}

}

我仍然试图把我的头从一个角度包裹起来,所以这里的答案可能是显而易见的。我在做研究时看到的几乎所有其他此类行为的例子似乎都涉及ngModel和onModelChange,但这似乎不适用于我或工作。有人能帮我弄清楚需要做些什么才能让它发挥作用吗?

您可以使用(change)事件绑定而不是单击。

另一种可能性是将该值作为另一个参数传递给函数:

<input type="radio" formControlName="infraRadio" [value]="1" (click)="radioSetValidator(1, changeForm.get('changeAssessmentFG.infraRadio'),[changeForm.get('changeAssessmentFG.newInfrastructure')])">Yes
<input type="radio" formControlName="infraRadio" [value]="0" (click)="radioSetValidator(0, changeForm.get('changeAssessmentFG.infraRadio'),[changeForm.get('changeAssessmentFG.newInfrastructure')])">No
radioSetValidator(value: number, c: FormControl, d: [FormControl]) {
if (value === 1) {
d.forEach(element => {
element.setValidators(Validators.required);
});
} else {
d.forEach(element => {
element.clearValidators();
});
}
}

最新更新