Как отключить поле ввода мата на основе значения переключателя мата?

Question

В моей форме есть «mat-radio-group», в которой есть 2 «mat-radio-button» со значениями «yes» и «no».

Я хочу использовать эти значения для включения или отключения другого поля ввода (простой matInput) в зависимости от того, что выберет пользователь.

Я также хотел бы отключить matInput по умолчанию (перед тем, как пользователь выберет «yes» или «no» из группы радио).

Я использую угловые реактивные формы, и для этих входов у меня есть имена элементов управления формой настройки.

Представьте, что имя formGroup - "myForm".

Ниже приведен код, который у меня есть в моем шаблоне:

<mat-radio-group formControlName="myRadio">
          <mat-radio-button value="yes" required>Yes</mat-radio-button>
          <mat-radio-button value="no" required checked>No</mat-radio-button>
</mat-radio-group>

<mat-form-field>
          <input matInput formControlName="myInput" />
</mat-form-field>

Answer 1

Обновлено для предпочтительного способа Reactive

Благодаря комментарию @Severus я захотел обновить свой ответ, чтобы отразить предпочтительный способ обработки этого в реактивных формах.Мой первоначальный ответ ниже был «быстрый и грязный» способ, но если вы хотите сделать это правильно, вы должны инициализировать myInput как отключенный при создании формы:

FormControl({ value: '', disabled: true })

, а затем добавить "enabler "на элементе управления переключателя, например:

this.myForm.get('myRadio').valueChanges.subscribe(value => {
    const enableOrDisable = value !== null ? 'enable' : 'disable';
    this.myForm.get('myInput')[enableOrDisable]();
});

Оригинальный ответ

Примечание. Этот подход все еще действителен при использовании формы на основе шаблона, но его не следует использоватьв методологии реактивной формы. При использовании в шаблонных формах, вы просто должны установить значение «отключено» равным ngModel, привязанному к переключателю.

Вы должны просто иметь возможность установить отключенное значение назначение зависимого поля.

<input matInput formControlName="myInput" [disabled]="!myForm.value?.myRadio" />

Затем инициализируйте значение вашей myRadio в вашей форме на null.Если вместо значений yes и no установить значения радиосвязи на true и false, вам нужно будет просто проверить значение null (myForm.value?.myRadio !== null).