Angular Material下拉切换动态设置输入正则校验及代码优化、错误提示问题

问题1：校验错误提示不显示的修复 #

你的代码里mat-error无法显示主要有三个原因，对应修复如下：

1. 输入框未包裹在mat-form-field中：Angular Material的错误提示组件mat-error必须和输入框一起放在mat-form-field容器内才能正常触发显示逻辑。
2. 设置校验器后未更新表单状态：调用setValidators后需要执行updateValueAndValidity()，通知表单重新计算校验状态。
3. 下拉框事件参数处理错误：selectionChange返回的是MatSelectChange对象，要通过event.value获取选中的类型ID，而非直接使用event。

修复后的HTML代码：

<mat-form-field style="width:80%;" class="select-input-field">
    <mat-select [(value)]="selected" placeholder="Inspection Type" (selectionChange)="onDropDownChange($event)">
        <mat-option [value]="">None</mat-option>
        <mat-option *ngFor="let inspectionType of inspectionTypes" [value]="inspectionType.inspection_type_id">
            {{inspectionType.description}}
        </mat-option>
    </mat-select>
</mat-form-field>

<form [formGroup]="form">
    <mat-form-field style="width:80%;">
        <input type="text" formControlName="inputValue" placeholder="predicatePlaceHolder">
        <mat-error class="alert-danger" *ngIf="form.get('inputValue')?.hasError('pattern')">
            {{currentErrorMsg}}
        </mat-error>
    </mat-form-field>
</form>

问题2：简化大量if else的逻辑重构 #

可以通过配置映射表的方式，把校验规则和类型ID绑定，避免冗余的条件判断：

1. 先定义校验规则配置：

// 定义每个检查类型对应的正则和错误提示
private inspectionValidations = {
  1: { pattern: '[0-9]{12}', errorMsg: '请输入12位数字' },
  2: { pattern: '[A-Z]{2}\\d{7}', errorMsg: '请输入2位大写字母+7位数字' },
  3: { pattern: '\\d{6}[A-Z]{3}', errorMsg: '请输入6位数字+3位大写字母' }
};
public currentErrorMsg = '';

2. 重构下拉框变化事件处理：

onDropDownChange(event: MatSelectChange) {
  const inputControl = this.form.get('inputValue');
  if (!inputControl) return;

  inputControl.reset();
  inputControl.clearValidators(); // 先清除原有校验器

  const selectedType = event.value;
  if (selectedType && this.inspectionValidations[selectedType]) {
    const { pattern, errorMsg } = this.inspectionValidations[selectedType];
    inputControl.setValidators(Validators.pattern(pattern));
    this.currentErrorMsg = errorMsg;
  }

  inputControl.updateValueAndValidity({ emitEvent: false }); // 更新校验状态，避免触发不必要的表单事件
}

这样修改后，后续新增检查类型时，只需要在inspectionValidations配置中添加新的条目即可，无需修改事件处理逻辑，代码更易维护。

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