angular - 根据角度中选择组件的值启用或禁用输入字段

Question

我有 2 个组件选择和输入组件。如下图所示。

场景：默认情况下，我已将输入字段设置为禁用。如果我从选择组件中选择某个选项，则该字段将变为活动状态。此场景工作正常。

预期结果： 我应该在选择组件（即下拉菜单）中有另一个选项来再次禁用输入字段（如果用户不想从选择组件中选择任何内容）。

这是stackblitz链接。

标签： angularangular-material

Answer 1

你必须做一些编辑。在你的 HTML 文件中

<mat-form-field class="id-name">
        <mat-select placeholder="ID Card" formControlName="IDproof" (ngModelChange)="onChange($event)">
            <mat-option *ngFor="let IDproof of  IDproofs" [value]="IDproof.value">
                {{IDproof.viewValue}}
            </mat-option>
        <mat-option  [value]="'disabled'">
                {{'disabled'}}
            </mat-option>
        </mat-select>
    </mat-form-field>

在你的 ts 文件中

onChange(data) {
    if(data && data != 'disabled'){
      this.myForm.get('idNum').enable()
    }else{
      this.myForm.get('idNum').disable()
    }
  }