Как отключить текстовое поле, когда радио-кнопка нажата под углом 4

Question

У меня есть форма ниже

      <form #myForm="ngForm" (ngSubmit)="registerUser(form)">
    <table class="table borderless">
        <tbody>

      <tr style="width: 100%">
        <td >
            <div class="form-group">
       <input type="radio" name="ffStatus" value="radio1" checked > radio1<br>
            </div>
      </td>


      <tr style="width: 100%">
        <td >
       <input type="radio" name="ffStatus" value="radio2"> radio2<br>
       </td>

      <td >
          <div class="form-group">
              <input type="text"  class="form-control" placeholder="DESTINATION" name="destination" [disabled]="true" required pattern="[A-Z|a-z]{3}">    
           </div>
      </td>
      </tr>


    </table>
    <table style="float:right;">
      <tr>
        <td>
          <button mat-button  class="btn btn-outline-success" (click) = "getProfile()" type="submit" >Submit</button>
        </td>
        <td>
            <button mat-button  class="btn btn-outline-success"  type="reset" (click)="clearValues()">Reset</button>
        </td>
      </tr>
    </table>
    </form>

Я хочу отключить целевое текстовое поле при переключении радио при нажатии на радио1 и хочу вставить в него текст и включить при нажатии радио 2.

Как этого добиться?

Answer 1

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

Вот упрощенный пример.

шаблон:

<input type="radio" name="ffStatus" value="radio1" (click)="toggle()" checked /> radio1<br>
<input type="radio" name="ffStatus" value="radio2" (click)="toggle()" /> radio2<br>
<input type="text"  placeholder="DESTINATION" name="destination" [disabled]="textBoxDisabled" required pattern="[A-Z|a-z]{3}" />

тс код:

  textBoxDisabled = true;

  toggle(){
    this.textBoxDisabled = !this.textBoxDisabled;
  }

Вот демо:

https://stackblitz.com/edit/angular-jgv9vb?embed=1

Надеюсь, вы найдете это полезным.