CODEWITHSUNDEEP
angular
Raj
Raj

Reputation: 2493

How to disable Text Field when radio button clicked in angular 4

I have below form

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

I want to disable destination text field when radio when radio1 is clicked and want to populate some text into it and enable when radio 2 is clicked.

How to achieve this?

Upvotes: 1

Views: 6293

Answers (1)

woodykiddy
woodykiddy

Reputation: 6455

Essentially what you really need is to implement a toggling function that changes a boolean type variable whenever the radio button is clicked. Then bind this variable to the disabled attribute of the input text box.

Here's the simplified example.

template:

<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}" />

ts code:

  textBoxDisabled = true;

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

Here's the demo:

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

Hope you find it helpful.

Upvotes: 3

Related Questions