0

我做了一个下拉菜单 在此处输入图像描述 如您所见，有空的文本区域并且没有选择任何选项。我想禁用所有按钮，直到选择任何选项并且 textareas 已满，这意味着必须选择一个选项。我该怎么做？

这是我的代码：

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

  }
4

2 回答 2

0

您需要在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

于 2021-09-28T19:22:55.673 回答
-2

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

你可以参考他们 [博客]：使用 formik 和 typescript (Ionic) "Here"

于 2021-09-28T19:08:23.377 回答