ngIf an angular reactive form component value

Question

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?

AVJT82 · Accepted Answer · 2019-11-15 13:30:15Z

7

You need to access the value of the form control:

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

STACKBLITZ

answered Nov 15, 2019 at 13:30

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pinka Over a year ago

In Angular 8 this does not work. We need to change it as below, *ngIf="radioButtonGroup.get("selectedButton").value === "yes"

AVJT82 Over a year ago

@Pinka Yes, that is how you get the value of a formcontrol that has a primitive value, but OP has an OBJECT value for the form control, which includes a property named "section", so we need to dig into the nested object in this case.

Guerric P · Accepted Answer · 2019-11-15 13:23:51Z

5

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

answered Nov 15, 2019 at 13:23

Guerric P

32k6 gold badges61 silver badges109 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-11-15 13:33:16Z

1

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

edited Nov 15, 2019 at 13:33

answered Nov 15, 2019 at 13:26

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

Meyyappan Subramaniyan · Accepted Answer · 2019-11-15 13:44:04Z

1

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.

edited Nov 15, 2019 at 13:44

answered Nov 15, 2019 at 13:38

Meyyappan Subramaniyan

3631 silver badge6 bronze badges

Collectives™ on Stack Overflow

ngIf an angular reactive form component value

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related