CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
mic_test
mic_test

Reputation: 161

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

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>
    ```

Upvotes: 1

Views: 6508

Answers (3)

Eranki
Eranki

Reputation: 807

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;

Upvotes: 0

Wahab Shah
Wahab Shah

Reputation: 2256

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.

Upvotes: 2

AhammadaliPK
AhammadaliPK

Reputation: 3548

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
  }
  
}

Upvotes: 0

Related Questions