Odtnhj

Scenario:

• I am working on a form using the angular material and angular 6


• I would want to display the relevant text boxes as per the type choosen from the radio buttons which give them.

Code i have used for radio button

<div class="form-group m-form__group row">
 <div class="m-radio-list">
 <mat-radio-group>
 <p>
 <mat-radio-button value="newBusiness">New</mat-radio-button>
 <mat-radio-button value="renewal">Renewal</mat-radio-button>
 <mat-radio-button value="rollover">Old</mat-radio-button>
 </p>
 </mat-radio-group>
 </div>
</div>

Todo :

• So based on these 3 types, once a user selects a specific type for eg the new i want to display to him text boxes for name and number ,
  if another value then other text boxes.

Demo with Bydefault a checkbox selected

Application Code : https://stackblitz.com/edit/angular-27et6e?file=src/app/app.component.ts

(in this code, i have selected the 3rd checkbox bydefault, you can select the first if you want)

Approach :

• Make 2 div container, one for radio-buttons, other for showing the corresponding inputs container according to selected radio-button.


• You can use change event like (change)="changeComboo($event)",
  i have just used the ngModel to bind value to a variable like [(ngModel)]="favoriteSeason".

Update 1 (select bydefault first checkbox) :

• As mat-radio-group is binded using [(ngModel)]="favoriteSeason",
  So in function ngOnint()- we can assign this favoriteSeason variable a default value through this.favoriteSeason = this.seasons[0]; (if we want to select the first checkbox).

Try like this

<div class="radio"> 
 <label> 
 <input type="radio" name="radio" value="New" (click)="setradio('New')" [checked]='true' ngModel> 
 New
 </label> 
</div> 
<div class="radio"> 
 <label> 
 <input type="radio" name="radio" value="Renewal" (click)="setradio('Renewal')" ngModel> 
 Renewal
 </label> 
</div> 

<div *ngIf="isSelected('New')" > 
 <input type="text"/> New radio button selected 
</div> 

<div *ngIf="isSelected('Renewal')"> 
 <input type="text"/> Renewal radio button selected 
</div>

in your component.ts

private selectedLink: string="New"; 

setradio(e: string): void 
 this.selectedLink = e; 
 

isSelected(name: string): boolean 

 if (!this.selectedLink) // if no radio button is selected, always return false so every nothing is shown 
 return false; 
 

 return (this.selectedLink === name); // if current radio button is selected, return true, else return false