javascript - Angular:跨字段验证不适用于 setError()

Question

我有一个跨字段验证方法，如果以下任一结果为真，该方法应该会失败:

• 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 });

Working example

Answer 1

因此您的按钮仍然处于禁用状态，因为您没有从不同的表单控件中删除之前设置的错误。

当您在 return null; 上方添加以下内容时，它将起作用:

stateSelect.setErros(null);
stateText.setErrors(null);