Question

我已经在Angular中创建了一个表单，该表单根据用户输入设置各种字段。问题在于该表格似乎无法接受用户对某个广播组的输入，而且我也不知道如何编写代码。

我尝试根据表单的其他部分（所有这些都可以工作）为广播组建模。

在我的表格中，我有：

export class FormPage implements OnInit {
  myForm: FormGroup; 

  showID: boolean;
  showName: boolean;
  showBirthday: boolean;
  showSex: boolean;

  constructor(
    private formService: FormService,
    private datePicker: DatePicker,
    private formBuilder: FormBuilder
  ) { 
    this.myForm = this.formBuilder.group({
      studyID: '',
      name: '',
      dateOfBirth: '',
      sex: '',
    })
  }

在我的HTML中，

<ion-item *ngIf="showName">
            <ion-label position="stacked">Name<ion-text color="danger"></ion-text></ion-label>
            <ion-input formControlName="name" type="text"></ion-input>
        </ion-item>

能够相应地设置字段“名称”。

但是，进行无线电组选择性别的操作无效。性别

          <ion-input formControlName="sex">
              <ion-label>Female</ion-label>
              <ion-radio value="female" name="female"></ion-radio>

              <ion-label>Male</ion-label>
              <ion-radio value="male" name="male"></ion-radio>
          </ion-input>
    </ion-radio-group>

我希望将所选单选按钮的值发送到表单中正确的“性别”字段。

Answer 1

将无线电组包裹在离子列表组件中，然后将无线电组按钮放在离子列表上。然后为ge使用相同的名称

RadioGroup

单选组是一组单选按钮。它允许用户选择   一组中最多有一个单选按钮。检查一个单选按钮   属于单选组取消选中任何先前选中的单选按钮   在同一组内

<ion-radio-group>
        <ion-list formControlName="sex" radio-group>
            <ion-radio-group>
                <ion-item>
                    <ion-label>Female</ion-label>
                    <ion-radio value="female" name="sex"></ion-radio>
                </ion-item>

                <ion-item>
                    <ion-label>Male</ion-label>
                    <ion-radio value="male" name="sex"></ion-radio>
                </ion-item>
            </ion-radio-group>
        </ion-list>
</ion-radio-group>

示例：https://stackblitz.com/edit/stackoverflow-ionic-radio-button-group-zik11r

Answer 2

尝试一下：

this.myForm.controls['sex'].setValue(sex);

如何将单选按钮中的值发送到表单？

2 个答案: