Question

10

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

rated 0 times [ 17] [ 7] / answers: 1 / hits: 5419 / 4 Years ago, wed, june 24, 2020, 12:00:00

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?

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>

    ```

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaceyr

Add To Favorites

Follow

Total Points: 510

Total Questions: 97

Total Answers: 116

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

kaceyr questions

1 TypeScript Expected 1 arguments, but got 2

Wed, Dec 15, 21, 00:00, 2 Years ago

1 How to change variable value in index.html based on the environment in angular

Thu, Feb 6, 20, 00:00, 4 Years ago

1 react dynamic import using a variable doesn't work

Sat, Oct 12, 19, 00:00, 5 Years ago

1 puppeteer-cluster: queue instead of execute

Mon, Aug 5, 19, 00:00, 5 Years ago

1 Spread Operator to get single property of objects inside an Array - JS/TS

Sat, Apr 27, 19, 00:00, 5 Years ago

View All

answered 4 Years ago byron · Accepted Answer

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

Radio 2

Hope it will solve your issue.