Отключить ввод формы Angular Reactive на основе значения выбора

Question

У меня есть форма (с использованием углового материала), и я хочу отключить некоторые поля ввода на основе значений выбора.Мой код выглядит следующим образом:

HTML

<mat-form-field class="someclass">
    <mat-select placeholder="Select payment method" formControlName="paymentMethod">
      <mat-option *ngFor="let payment of paymentMethodOptions" [value]="payment.value">
        {{payment.viewValue}}
      </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field class="someclass">
    <input matInput placeholder="Some input" formControlName="testInput">
</mat-form-field>

TS

paymentMethodOptions: payment[] = [
    { value: "opt-1", viewValue: "somevalue" },
    { value: "opt-2", viewValue: "anothervalue" }
  ];

paymentForm = new FormGroup({
    paymentMethod: new FormControl("", Validators.required),
    testInput: new FormControl({ value: "", disabled: true }, [
      Validators.required
    ])
  });

Я хочу отключить testInput , если значение выбораравен opt-1 .Я перепробовал несколько вариантов, но получил разные ошибки и не смог их решить.Есть ли рабочее решение для этого?Заранее спасибо!

Answer 1

Вы можете использовать свойство selectionChange @Output на MatSelect и соответственно реагировать:

onSelectionChanged({value}) {
  console.log(value);
  if(value === 'opt-1') {
    this.paymentForm.get('testInput').disable();
  } else {
    this.paymentForm.get('testInput').enable();
  }
}

И в шаблоне

<mat-select ... (selectionChange)="onSelectionChanged($event)">

Вот Sample StackBlitz для вашей ссылки.

ПРИМЕЧАНИЕ: Если в вашей форме больше элементов управления, чем просто mat-select, прослушивание valueChanges в целомФорма может быть дорогой, так как она будет срабатывать каждый раз, когда происходит изменение в каком-либо элементе управления формой.Все, что нас беспокоит, - это изменение выбора mat-select.

Answer 2

Хотя уже есть предоставленные ответы, если таковые возникли с той же проблемой.Вы можете напрямую отключить поле формы, непосредственно обратившись к его элементу управления

Создал демонстрацию Stackblitz ссылка

  <!-- INPUT FIELD --> 
  <mat-form-field formControlName="testInput">
    <input matInput 
           placeholder="Some input"
           [disabled]="paymentForm.get('paymentMethod').value === 'opt-1'">   // Disables the input once paymentMethod's formControlName value is opt-1    
  </mat-form-field>     

Answer 3

Вы можете прослушивать событие valueChanges в форме:

this.paymentForm.valueChanges.subscribe((value) => {
  if(value.paymentMethod == 'opt-1'){
   this.paymentForm.controls['testInput'].disable();
  }else{
   this.paymentForm.controls['testInput'].enable();
  }
});

Таким образом, каждый раз, когда изменяется select, вызывается событие valueChanges, условия запускаются, и оно будетвключить или отключить контроль формы.