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

Question

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

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

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

Вот ссылка stackblitz .

Answer 1

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

@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">

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

Answer 2

Вы должны сделать некоторые правки.в вашем 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()
    }
  }