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

问题描述：

我有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).

这是堆栈闪电链接.

答

您必须进行一些编辑.在您的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()
    }
  }

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

相关推荐