Question

我是离子2的新手，我找不到合适的解决方案。我的注册表格中有两个单选按钮。我需要根据单击的单选按钮启用两个输入字段。如果单击单选按钮1，则应启用输入字段1。

单选按钮

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

输入字段

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

Answer 1

我认为你需要这个：

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-和.ts文件：

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

您也可以添加表单逻辑。

在ionic2中使用单选按钮启用输入字段

1 个答案: