CODEWITHSUNDEEP
javascriptangulartypescriptangular-reactive-forms
Tom Rudge
Tom Rudge

Reputation: 3272

ngIf an angular reactive form component value

I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.

https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts

HTML.component

<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">

    <div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
        <label for="{{item.section}}" class="col-12 customradio"
            ><span>{{item.section}}</span>
            <input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
            <span class="checkmark"></span>
        </label>
    </div>

    <!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
  <div class="col-md-8" >
        <input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
    </div>

Can anybody get this to work and show me what I am doing wrong here please?

Upvotes: 9

Views: 12815

Answers (4)

Meyyappan Subramaniyan
Meyyappan Subramaniyan

Reputation: 363

Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.

In personal.component.ts, add this variable.

yesSelected: boolean = true;

Also in ngOnInit(),

this.form.valueChanges.subscribe(val=>{
      if(val.radioButtonsGroup.selectedButton.section === "yes") 
         this.yesSelected = true;
      else 
         this.yesSelected = false;
});

In personal.component.html, rewrite your if condition like this.

<div class="col-md-8" *ngIf="yesSelected">
      <input type="text" formControlName="title" placeholder="Title">
</div>

These changes will show the title textbox only when the yes check box is selected.

Upvotes: 1

Adrita Sharma
Adrita Sharma

Reputation: 22213

Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"

Try like this:

Working Demo

.html

<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />

<div class="col-md-8" *ngIf="showTitle">
        <input type="text" formControlName="title"   class="form-control" placeholder="Title">
</div>

.ts

  onRadiochange(e) {
    if(e.section == 'yes'){
      this.showTitle = true
    } else {
      this.showTitle = false
    }
  }

It can also be done in one line like this:

<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />

Upvotes: 1

AVJT82
AVJT82

Reputation: 73357

You need to access the value of the form control:

*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">

STACKBLITZ

Upvotes: 7

Guerric P
Guerric P

Reputation: 31815

Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:

*ngIf="form.controls['selectedButton'].value === 'yes'"

Upvotes: 5

Related Questions