Angular中动态设置表单验证错误失效问题求助

你的代码里setError不生效主要有几个核心问题，以下是针对性的修复方案：

问题根源 #

1. 遍历逻辑缺陷：用forEach遍历时，return只能跳出当前迭代，无法终止整个循环；且仅在找到重复时设置错误，未处理非重复场景下的错误清除，导致旧错误残留。
2. 未处理取消选择事件：onSelectionChange会在选中和取消选中时都触发，你没有区分这两种场景，导致取消选择时错误状态未更新。
3. 控件状态未主动更新：设置错误后未触发Angular的表单校验更新，模板无法感知到错误状态变化。

修改后的组件代码 #

ngOnInit() {
    this.form = this.fb.group({
        rawmaterial: [null, [Validators.required]],
    });
}

onProductChange(ob: MatOptionSelectionChange) {
    const rawMaterialControl = this.form.get('rawmaterial');
    // 只处理选中事件，取消选中时清空错误
    if (!ob.selected) {
        rawMaterialControl?.setErrors(null);
        return;
    }

    this.selectedRawmaterial = ob.source.value;
    let isDuplicate = false;

    if (this.data.rawMaterialList) {
        // 用some方法判断重复，找到匹配项后立刻终止遍历，效率更高
        isDuplicate = this.data.rawMaterialList.some(res => {
            return res.rawmaterialid === this.selectedRawmaterial.rawmaterialid;
        });
    }

    if (isDuplicate) {
        rawMaterialControl?.setErrors({ duplicate: true });
    } else {
        // 无重复时，保留required验证，仅清除duplicate错误
        const currentErrors = rawMaterialControl?.errors;
        if (currentErrors && currentErrors['duplicate']) {
            delete currentErrors['duplicate'];
            rawMaterialControl?.setErrors(Object.keys(currentErrors).length ? currentErrors : null);
        }
    }
    // 手动触发控件状态更新，确保模板感知到错误变化
    rawMaterialControl?.updateValueAndValidity();
}

模板代码优化（可选） #

给重复错误提示加上touched判断，避免逻辑异常时提前显示错误，同时把提示文本换成中文：

<mat-form-field class="full-wid mrgn-b-md" appearance="fill">
    <mat-label>{{'Raw Material ' |translate}}</mat-label>
    <input type="text"
           placeholder="选择原材料"
           matInput
           formControlName="rawmaterial"
           [matAutocomplete]="rawmaterial_auto"
           (keyup)="generateFilteredRawMaterials($event)"
           (click)="generateFilteredRawMaterials($event)">
    <mat-autocomplete
            autoActiveFirstOption
            #rawmaterial_auto="matAutocomplete"
            [displayWith]="displayFnRawMaterial">
        <mat-option *ngFor="let option of rawmaterialFilteredOptions | async"
                    [value]="option" (onSelectionChange)="onProductChange($event)">
            {{option.name}}
        </mat-option>
    </mat-autocomplete>
    <button type="button" mat-button
            *ngIf="form.get('rawmaterial').value" matSuffix
            mat-icon-button aria-label="清除"
            (click)="clearRawmaterialOption()">
        <mat-icon>close</mat-icon>
    </button>
    <mat-error
            *ngIf="form.controls['rawmaterial'].hasError('required') && form.controls['rawmaterial'].touched">
        此字段不能为空。
    </mat-error>
    <mat-error *ngIf="form.controls['rawmaterial'].hasError('duplicate') && form.controls['rawmaterial'].touched">
        该原材料已被选择。
    </mat-error>
</mat-form-field>

额外提示 #

• 提交按钮直接绑定[disabled]="form.invalid"即可，设置错误后控件会自动变为invalid状态，按钮会被禁用。
• 清空选项的clearRawmaterialOption()方法里，记得调用rawMaterialControl?.setErrors(null)来清除残留错误。

内容的提问来源于stack exchange，提问作者ZAJ