Angular- 在选择下拉选项之前禁用按钮

Question

我制作了一个下拉菜单如您所见，文本区域为空，并且未选择任何选项。我想禁用所有按钮，直到选择任何选项并且文本区域已满，这意味着必须选择一个选项。我该怎么做？

这是我的代码：

<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" disabled>{{ lang.title }}</mat-option>
        </mat-select>
      </td>
      <td class="col-1" *ngIf="entity.value!=null">
        <textarea style="height: 2rem" class="pl-5" >{{ entity.value }}</textarea>
      </td>
    </tr>
  </table>
  <div class="d-flex flex-column align-items-center mt-2">
    <button class="form-control" (click)="addNewLanguage()">Add new language</button>
      <div class="d-flex pt-2">
        <button class="form-control">Discard</button>
        <button class="form-control ml-4">Save Changes</button>
      </div>
  </div>
</div>

ts文件：

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 {
  }

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

  }

Answer 1

请使用 Formik 和 Yup。这是现场验证的好解决方案。

你可以参考他们[博客]：“这里”

Answer 2

只要选择了一个选项或更改了文本字段，您就需要调用 changeEvent 对于选择的选项

 <mat-select
            [(ngModel)]="entity.code"
            (selectionChange)="onChangeValue($event)"
            required
>

对于文本区域，您还需要将值绑定到 ngModel 像这样

 <textarea
            [(ngModel)]="entity.value"
            (change)="isDisabled()"
            style="height: 2rem"
            class="pl-5"
          ></textarea>

你想要禁用的按钮你需要像这样添加禁用属性

<button
        class="form-control"
        (click)="addNewLanguage()"
        [disabled]="isDisabled()"
      >
        Add new language
      </button>

 <button class="form-control ml-4" [disabled]="isDisabled()">
          Save Changes
        </button>

并且在 ts 文件中你需要这样做

 onChangeValue() {
    this.isDisabled();
  }
  isDisabled() {
    return this.rows.filter((item) => item.value == '' || item.code == '')
      .length > 0
      ? true
      : false;
  }

您会看到两者都在事件更改时调用相同的函数

这里是 stackblitz 只是为了演示 cahnge 它作为你的轻松 https://stackblitz.com/edit/angular-mat-select-example-decme7

Angular- 在选择下拉选项之前禁用按钮

Angular- Disable button till dropdown option is selected

typescript

angular-material

dropdown

angular

mat-select