How to show input fields based on mat radio button selection in angular material

1
votes

I'm using angular material 9.2.4

im working on the angular material mat radio button with an input field, every payment methods will have their own input field. if clicked 'Cash' will show one input field and hide other's input field.

how to show the input field based on the mat radio button selection?

enter image description here



My Code

     <mat-radio-group class="text-left">
        <div class="form-group">
          <mat-radio-button class="ft-12" *ngFor="let item of itemsList" value="{{item.name}}" (change)="onItemChange(item)">
            {{item.name}}
            <input type="text" class="form-control" placeholder="0">
          </mat-radio-button>
        </div>
      </mat-radio-group>
    ```
3
javascriptangulartypescriptangular-material
so credit card and cash voucher will have their own fields? SO like each radio will hide other 3 fields and show its field only? - Wahab Shah
@WahabShah yes, you are correct - mic_test
just answered it with code snippets and working screenshots. Kindly check - Wahab Shah

3 Answers

1
votes

Here you go, have a look..

in your component.ts file

Lets say this is your itemsList

itemsList = [
  {name: 'Cash'},
  {name: 'cheque'},
  {name: 'Credit Card'},
  {name: 'Cash Voucher'},
];

  isVisible = -1; // if you want to show by default some input keep it 0 for first radio, 1 for second and so on. I have kept it -1 so no input is shown by default

onItemChange(item, i) {
   console.log({item, i});
   this.isVisible = i;
}

In your component.html file

<mat-radio-group class="text-left">
     <div class="form-group">
        <mat-radio-button class="ft-12" *ngFor="let item of itemsList; let i = index;" value="{{item.name}}" (change)="onItemChange(item, i)">
              {{item.name}}
       <input type="text" *ngIf="isVisible == i" class="form-control" placeholder="0">
        </mat-radio-button>
     </div>
</mat-radio-group>

Here is your result

radio 1

enter image description here

Radio 2

enter image description here

Hope it will solve your issue.

0
votes

demo

<mat-radio-group class="text-left">
    <div class="form-group">
      <mat-radio-button class="ft-12" *ngFor="let item of itemsList" value="{{item.name}}" (change)="onItemChange(item)">
        {{item.name}}
       
      </mat-radio-button>
      
    </div>
  </mat-radio-group>
   <input *ngIf="selectedItem.name=='cash'" type="text" class="form-control" placeholder="0">

component.ts

export class AppComponent implements OnInit{ 
   selectedItem:  any={} ;  
    eventEditForm: FormGroup;
    itemsList=[];
  public toggleForm:boolean;

  ngOnInit(){
       this.eventEditForm = new FormGroup({          
      'completed': new FormControl()
      });      
    
this.itemsList=[{
  item:'check',
  name:'check'
},
{
  
  item:'cash',
  name:'cash'

}
]
  }
  onItemChange(item:any){
this.selectedItem=item
  }
  
}
0
votes

Basically, you need to maintain a variable which will always save the value of radio button you click everytime. So, added onClick event. And place a *ngIf in input tags. I'm just modifying your code:

<mat-radio-group class="text-left">
    <div class="form-group">
      <mat-radio-button class="ft-12" *ngFor="let item of itemsList" value="{{item.name}}" (click)="selectedField={{item.name}}">
        {{item.name}}
        <input *ngIf="selectedField==item.name" type="text"  class="form-control" placeholder="0">
      </mat-radio-button>
    </div>
  </mat-radio-group>

In your ts add this variable:

selectedField: string;