如何在ngfor无线电组中使用离子无线电?

时间:2018-12-21 06:59:43

标签: angular typescript ionic3

我正在开发入门IONIC应用程序。现在我需要知道如何在ngfor内部使用离子无线电

我尝试-FormControlName not working with ion-radio

但不起作用。

1)尝试1

<ion-list  radio-group formControlName="manufacturers">
      <ion-item *ngFor="let list of listArr; let i = index">
        <ion-label>{{list.name}}</ion-label>
        <ion-radio  [value]="list.name"></ion-radio>
      </ion-item>
</ion-list>

2)尝试2

<ion-list  radio-group >
      <ion-item *ngFor="let list of listArr; let i = index">
        <ion-label>{{list.name}}</ion-label>
        <ion-radio formControlName="manufacturers" [value]="list.name"></ion-radio>
      </ion-item>
 </ion-list>

Ts文件

ngOnInit() {

    this.listArr = [{ name: 'cucumber', checked: 'false' }, { name: 'Sausage', checked: 'false' }, { name: 'Pepperoni', checked: 'false' }, { name: 'Mushrooms', checked: 'false' }];
    // console.log(this.listArr);

    this.new_item_form = this.formBuilder.group({
      title: new FormControl('', Validators.required),
      description: new FormControl('', Validators.required),
      listName: new FormControl('', Validators.required),
      manufacturers: new FormControl('', Validators.required)
    });
  }

结果: 如果尝试1- NewItemPage.html:23错误错误:_throwError(forms.js:1732)上名称为“ manufacturers”的表单控件没有值访问器

如果尝试2- 没有错误,但默认情况下全部选中。

0 个答案:

没有答案