Чтобы включить или отключить поле ввода на основе значения выбора компонента в угловых

Question

У меня есть 2 компонента выбора и ввода компонента. Как показано на рисунке ниже.

Сценарий: здесь по умолчанию я установил поле ввода как отключенное. Если я выберу какую-либо опцию из выбранного компонента, то поле станет активным. Этот сценарий работает нормально.

Ожидаемый результат: у меня должна быть другая опция в компоненте выбора (выпадающий список i, e), чтобы снова отключить поле ввода (если пользователь не хочет выбирать что-либо из выбранного компонента).

Вот ссылка на стек.

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

Answer 2

Другой вариант - сделать директиву

@Directive({
  selector: '[enableControl]'
})
export class EnableControlDirective {
    @Input() set enableControl(condition: boolean) {
        if (this.ngControl) {
            if (this.ngControl.control) {
                if (condition)
                    this.ngControl.control.enable();
                else
                    this.ngControl.control.disable();
            }
        }
  }
  constructor(private ngControl : NgControl ) {}

Таким образом, вы можете использовать директиву как

  <input [enableControl]="condition">
  //e.g.
  <input [enableControl]="myForm.get('IDproof').value">

и мы не беспокоимся об изменениях, отключаем переменные и т. д.