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

问题描述：

我有 2 个组件 select 和 input 组件.如下图所示.

I am having 2 component select and input component.as shown in below image.

场景:默认情况下，我将输入字段设置为禁用.如果我从选择中选择一些选项> 组件，然后该字段变为活动状态.此场景工作正常.

Scenario: Here by default i have set input field as disabled.If i choose some option from select component then the field becomes active.This scenario is working fine.

预期结果:我应该在 select 组件(即下拉列表)中有另一个选项来再次禁用输入字段(如果用户不想从 select 组件中选择任何内容).

Expected Result: I should have another option in the select component(i,e dropdown) to disable the input field again(If user doesn't want want choose anything from select component).

这是 stackblitz 链接.

答

您必须进行一些编辑.在你的 Html 文件中

You have to do some editings. in your Html file

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

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

相关推荐