根据角度选择组件的值启用或禁用输入字段 [英] To enable or disable the input field based on the value of select component in angular

问题描述

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

这篇关于根据角度选择组件的值启用或禁用输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！