Enabling input fields with radio button in ionic2

Question

I am new to ionic 2 and I could not find a proper solution for this.I have two radio buttons in my signup form. I need to enable two in put fields based on the radio button that is clicked. If radio button one is clicked input field one should be enabled.

Radio buttons

<div radio-group formGroupName="church">
<label>Church</label>
<div>
  <label>CGT</label>
  <ion-radio value="cgt" ></ion-radio>
  <label>Other church</label>
  <ion-radio value="noncgt"></ion-radio>
</div>
</div>
<div>

Input fields

<div>
      <label>CGT member ID </label>
      <input formControlName="cgtMemberID" type="text" disabled="true">
      <small [hidden]="myForm.controls.cgtMemberID.valid || (myForm.controls.cgtMemberID.pristine && !submitted)">
    member ID required .
    </small>
    </div>

    <div>
      <label>Church Name </label>
      <input formControlName="churchName" type="text" disabled="true">
      <small [hidden]="myForm.controls.churchName.valid || (myForm.controls.churchName.pristine && !submitted)">
      Church name required .
      </small>
    </div>

Do the reverse logic : stackoverflow.com/questions/44909707/… — Vega
– Vega, Commented Sep 6, 2017 at 14:15

amin arghavani · Accepted Answer · 2017-09-06 15:32:55Z

1

I think you need this:

1- in html:

<div radio-group>
    <label>Church</label>
    <div>
        <label>CGT</label>
        <ion-radio value="cgt" (ionSelect)="radio_select('cgt')"></ion-radio>
        <label>Other church</label>
        <ion-radio value="noncgt" (ionSelect)="radio_select('noncgt')"></ion-radio>
    </div>
</div>
<div>
    <label>CGT member ID </label>
    <input type="text" [disabled]="cgt">
</div>
<div>
    <label>Church Name </label>
    <input type="text" [disabled]="cn">
</div>

2- and in .ts file:

cgt: boolean = true;
cn: boolean = true;
radio_select(value) {
  if (value == 'cgt') {
    this.cgt = false;
    this.cn = true;
  } else if (value == 'noncgt') {
    this.cgt = true;
    this.cn = false;
  }
}

you also can add your form logic.

answered Sep 6, 2017 at 15:32

amin arghavani

1,88314 silver badges21 bronze badges

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

2 Comments

John Over a year ago

Runtime Error co.radio_select is not a function I get this error

John Over a year ago

I rebuild the whole code and it works now.Thanks alot.

Collectives™ on Stack Overflow

Enabling input fields with radio button in ionic2

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related