根据角度选择组件的值启用或禁用输入字段 [英] 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).

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

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