Angular2 enable an input field on check of radio button

Question

Am iterating through items and i would lie to show an input box if a certain radio button is checked

This is the form

<ion-card *ngFor="let checklist of checklists;let i=index">

   <input type='radio' name="check{{checklist.id}}" value='yes_{{checklist.id}}'> Yes


   <input type='radio' name="check{{checklist.id}}" value='no_{{checklist.id}}'> Not passed


       <ion-item [hidden]="">//hide when Not passed radio is not checked
         <ion-label floating>Comment</ion-label>
         <ion-input type="text"></ion-input>
       </ion-item>

</ion-card>

How do i hide the comment area when no is not checked and show it only when checked

Günter Zöchbauer · Accepted Answer · 2017-02-01 14:55:21Z

1

   <input #notPassed type='radio' name="check{{checklist.id}}" value='no_{{checklist.id}}'> Not passed


       <ion-item [hidden]="notPassed.value == '...'">//hide when Not passed radio is not checked

(I don't know what actual values you are using, therefore just ...)

Hint: not tested myself yet.

answered Feb 1, 2017 at 14:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Geoff Over a year ago

The value of not passed radio button is determined but the index of ((*ngFor="let checklist of checklists;let i=index")) that is the value of i. Ive tried adding [hidden]="notPassed.value == 'no_{{checklist.id}}" and am getting an error of Got interpolation ({{}}) where expression was expected

Günter Zöchbauer Over a year ago

You can't use [] and {{}} at the same time. Try ` [hidden]="notPassed.value == 'no_' + checklist.id"`

Geoff Over a year ago

Okay the error dissapears but the input field always remains hidden even when checked

Geoff Over a year ago

When i check on the inspect element the value of the radio doesnt change when checked

Günter Zöchbauer Over a year ago

Sorry, don't know about the radio. I haven't ever used one myself.

|

Collectives™ on Stack Overflow

Angular2 enable an input field on check of radio button

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related