Angular 9 Reactive forms show hide div based on Radio buttons selection

Question

I have an Angular application and I have Angular Material Radio Group I want to show and hide div based on Angular material radio selection my form is Reactive I searched other solutions were not reactive forms, thanks.

here is my code:

       <div>
                        <label id="theschedule">Due: </label>
                        <mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" class="example-radio-button"  [value]="sch_item.ID" >
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>
                </div>
             
                <div class="row-two input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px" [hidden]="myform.controls.Schedule.value=3">
                   <mat-form-field appearance="outline">
                        <input matInput [matDatepicker]="StartDate" placeholder="Start date *" [min]="sDate"
                            formControlName="StartDate">
                            <mat-label>Start Date *</mat-label>
                        <mat-datepicker-toggle matSuffix [for]="StartDate"></mat-datepicker-toggle>
                        <mat-datepicker #StartDate></mat-datepicker>
                    </mat-form-field> 
    
                    <mat-form-field appearance="outline">
                        <input matInput [matDatepicker]="EndDate" placeholder="Due date *" [min]="mDate"
                            formControlName="EndDate">
                            <mat-label>Due date*</mat-label>
                        <mat-datepicker-toggle matSuffix [for]="EndDate"></mat-datepicker-toggle>
                        <mat-datepicker #EndDate></mat-datepicker>
                    </mat-form-field>
                </div>

Answer 1

You can use subscribe change of reactive forms:

create a boolean variable and set it to false in your component.ts

 ishidden:boolean = false;

 this.myform.valueChanges.subscribe(res=>{
    if(res.Schedule=='whatever number or text '){
      this.ishidden= true;
    }else{
      this.ishidden = false;
    }
 });

and in your component.html the div or element you want to hide add the following code

 <div *ngIf="ishidden ">
    //what ever you want to hide and show based on your radio selection
 </div>

or you can use the change event

like below code:

  <label id="theschedule">Due: </label>
                        <mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button (change)="radioButtonChanged($event);" id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" [value]="sch_item.ID" >
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>

and in your component

 radioButtonChanged($event){
   let radioValue = event.target['value'];
    if(radioValue ==1){
      this.ishidden = true;
    }else{
      this.ishidden = false;
    }
 }

hope this helps

Answer 2

You can simply use the value of the radio button on your Html. No need to define a variable for this.

<div *ngIf="yourForm.value.Schedule === 'yourRadioButtonValue' ">
  <!-- radio button div -->
</div>

you can have div for every radio button.just change the 'yourRadioButtonValue'.You can do it dynamically like this.

<section *ngFor="let sch_item of schedule">
  <div *ngIf="form.value.Schedule === sch_item.ID">
    {{sch_item.name}} content
  </div>
</section>

Working demo.

Answer 3

The solution would be to detect change of the Radio Button (change)="radioButtonChanged($event)

<mat-radio-group aria-labelledby="theschedule" formControlName="Schedule" >
                            <mat-radio-button id="{{sch_item.Name}}"  *ngFor="let sch_item of schedule" class="example-radio-button"  [value]="sch_item.ID" (change)="radioButtonChanged($event)">
                                {{sch_item.Name}} &nbsp;
                            </mat-radio-button>
                        </mat-radio-group>

<div *ngIf = "showDiv">
//Your content goes here.
</div>

Then in your ts file you need to access this event and show and hide your div accordingly. Define the function in the ts file. Also create a variable divShow which is a boolean that can show or hide a particular div.

showDiv : boolean;

radioButtonChanged($event){
   // if you need the event source and value it can be accessed.
  console.log($event.source.name, $event.value);
 if($event.value == true){
    showDiv = true;
}else{
   showDiv = false;
}
}