时间戳

首页 > 解决方案 > Angular：跨字段验证不适用于 setError()

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

问题描述

我有一个跨字段验证方法，如果以下条件之一评估为真，则该方法应该失败：

countryandstateSelect都是<select>项目，而sateText是<input type="text">. 当我加载页面country = 'United States'时stateSelect = {name: 'Alabama', abbr: 'AL'}，一切都会正确评估。

如果我在选择中将 country 更改为另一个值，然后将其更改回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 });

工作示例

标签： javascriptangulartypescript

解决方案

问题出在你的呼唤上——你需要移除这些setErrors呼唤。这些是验证整个表单的组验证器的副作用。当这些在各个字段上设置错误时，没有什么可以解除它们。

您可能应该为使用组验证器函数中的逻辑的每个字段编写自定义验证器，而不是调用 setErrors 并且只返回 null 或值。或者保留组验证器，并在组出现错误时显示单个错误。

推荐阅读