Angular实现下拉框未选、文本框未填时禁用按钮的方法

实现步骤 #

第一步：修正HTML模板代码

主要修改3处：

1. 移除mat-option上写死的disabled属性，否则所有下拉选项默认不可选
2. 给textarea添加双向绑定，同步文本框输入值到后台变量
3. 给所有按钮添加[disabled]绑定，关联表单校验状态
   修改后的HTML代码：

<div>
  <table class="justify-content-between">
    <tr *ngFor="let entity of rows">
      <td class="col-1" *ngIf="entity.value!=null">
        <mat-select [(ngModel)]="entity.code" (selectionChange)="onChangeValue($event)" required>
          <mat-option *ngFor="let lang of languages" [disabled]="!lang.canEdit" [value]="lang.code">{{ lang.title }}</mat-option>
        </mat-select>
      </td>
      <td class="col-1" *ngIf="entity.value!=null">
        <textarea style="height: 2rem" class="pl-5" [(ngModel)]="entity.value" required>{{ entity.value }}</textarea>
      </td>
    </tr>
  </table>
  <div class="d-flex flex-column align-items-center mt-2">
    <button class="form-control" (click)="addNewLanguage()" [disabled]="isFormInvalid">Add new language</button>
      <div class="d-flex pt-2">
        <button class="form-control" [disabled]="isFormInvalid">Discard</button>
        <button class="form-control ml-4" [disabled]="isFormInvalid">Save Changes</button>
      </div>
  </div>
</div>

第二步：TS代码新增表单校验逻辑

新增一个计算属性isFormInvalid，自动检测所有行的下拉选择状态和文本框填充状态，只要有任意一行未选下拉或者文本框为空，就返回true禁用所有按钮：

dialogData: DialogDataModel;
languages: any[];
rows: any[] = [];

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogDataModel) {
    this.dialogData = data;
    this.rows = this.dialogData.localisedEntities.filter(lang => lang.value);
    this.languages = this.dialogData.localisedEntities.map(item => ({ code: item.code, title: item.title, canEdit: item.canEdit }))
  }

ngOnInit(): void {
}

// 新增的表单校验计算属性
get isFormInvalid(): boolean {
  // 遍历所有行，只要有一行不符合要求就返回true（禁用按钮）
  return this.rows.some(row => {
    // 下拉未选 或者 文本框为空/全空格
    return !row.code?.trim() || !row.value?.trim();
  });
}

addNewLanguage() {
  this.rows.push({
    code: '',
    title: '',
    value: '',
    canEdit: true
  });
}

onChangeValue(ev: any){
  this.rows = this.rows.map(row => {
    if (row.code == ev.value) {
      const lang = this.languages.find(lang => lang.code == ev.value);
      row.title =lang.title;
    }
    return row;
  });

  this.languages = this.languages.map(lang => {
    if (lang.code == ev.value) {
      lang.canEdit = false;
    }
    return lang;
  });
}

注意事项

如果你的项目还没有在对应模块导入FormsModule，需要先在模块的imports数组中加入FormsModule，否则ngModel双向绑定不会生效。
isFormInvalid会在页面任意绑定的变量（下拉选择值、文本框输入值）变化时自动重新计算，只要所有行都完成下拉选择且文本框填充了内容，按钮就会自动解除禁用。如果需要调整校验规则（比如允许文本框有空格），只需要修改isFormInvalid里的判断逻辑即可。

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