我有一个跨字段验证方法,如果以下任一结果为真,该方法应该会失败:
-
country == 'United States'
和stateSelect
为空 -
country != 'United States'
和stateText
为空
country
和stateSelect
都是<select>
项目同时 sateText
是 <input type="text">
。当我加载页面country = 'United States'
时和stateSelect = {name: 'Alabama', abbr: 'AL'}
,并且一切都正确评估。
如果我在选择中将国家/地区更改为另一个值,则将其更改回 United States
,它评估正确,但我的按钮保持禁用状态。
<form [formGroup]="purchase" class="forum-purchase__grid">
<!-- inputs and selects -->
<button [disabled]="purchase.invalid">Next</button>
</form>
该组件如下所示:
public constructor() {
this.purchase = new FormGroup({
stateSelect: new FormControl(this.selectedState),
stateText: new FormControl(''),
country: new FormControl(this.selectedCountry, [Validators.required]),
}, { validators: [this.stateRegionValidator] });
}
private stateRegionValidator(formGroup: FormGroup): ValidationErrors | null {
const stateSelect = formGroup.get('stateSelect');
const stateText = formGroup.get('stateText');
const country = formGroup.get('country');
// Validate the fields
if (country.value === 'United States' && !stateSelect.value) {
stateSelect.setErrors({ 'badState': true });
return { 'badState': true };
} else if (country.value !== 'United States' && !stateText.value.trim().length) {
stateText.setErrors({ 'badRegion': true });
return { 'badRegion': true };
}
// The validation was successful.
return null;
}
我确实注意到,如果我删除这两行,这会起作用,但是,我在输入上不会收到错误样式:
stateSelect.setErrors({ 'badState': true });
stateText.setErrors({ 'badRegion': true });
最佳答案
因此您的按钮仍然处于禁用状态,因为您没有从不同的表单控件中删除之前设置的错误。
当您在 return null;
上方添加以下内容时,它将起作用:
stateSelect.setErros(null);
stateText.setErrors(null);
关于javascript - Angular:跨字段验证不适用于 setError(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59672149/