FormControlName 不适用于离子收音机

Question

新：

所以我可以让它在没有无线电组或没有正确绑定的情况下工作。我无法让它与两者一起工作。

这是允许的：

<div *ngFor="let column of row.controls.columns.controls; let j = index">
                <ion-list radio-group [formControlName]="'col'+j">
                    <ion-radio></ion-radio>
                </ion-list>
            </div>

但是我没有包含无线电组的列表，无论我更改什么，它总是会中断。如果我将列表移到它破坏的外部，请移动它破坏的 formControlName。我真的不知道如何让它工作。

我认为应该这样做：

<ion-list radio-group>
            <div *ngFor="let column of columns; let j = index">
                <div [formControlName]="'col'+j">
                    <ion-radio></ion-radio>
                </div>
            </div>
        </ion-list>

但同样的错误：

Error: No value accessor for form control with path: 'rows -> 0 -> col0'

i = 我需要的行数。 j = 我需要 options/questions 的数量。

旧：

我正在尝试将 ion-radio 用作表单组中的输入字段，但它一直给我错误：

No value accessor for form control with path ...

所以我切换到 type="radio" 的输入，但如果我想将它们分组，我需要给它们相同的名称，但我不能这样做，因为我使用的是 *ngFor 和否则我的 formControlName 不再正确。

任何人都可以帮助我让离子收音机工作吗？这样会更好看，更容易分组。

<ion-col radio-group class="radioGroup" col-6>
   <ion-col *ngFor="let column of columns; let j = index">
        <input value="X" formControlName="col{{j + 1}}" type="radio" />
        <!-- <ion-radio value="X"></ion-radio> -->
    </ion-col>
</ion-col>

创作：

this.inspectionTableForm = this.formBuilder.group({
    header: this.formBuilder.group({
        title: [this.question.properties.header[0]],
        columns: this.formBuilder.array([
                    this.formBuilder.control('')
                ]),
        comments: ['']
    }),
    rows: this.formBuilder.array([
        this.initRow()
    ])
});

private initRow() {
    // Create the temp control
    let tempControl = this.formBuilder.group({
        title: '',
    });

    // Create an array for the columns
    let arr = [];
    for (let index = 0; index < this.question.properties["number-of-columns"]; index++) {
        // Push a control to the array and also one for the value on a higher level
        arr.push(this.columns[index])
        tempControl.addControl(`col${index}`, this.formBuilder.control('')) // Col-1-2-3
    };
    tempControl.addControl('columns', this.formBuilder.array(arr)) //Array

    // Check if we need to add the comment field
    if (this.question.properties["comment-field"]) {
        tempControl.addControl('comment', this.formBuilder.control(''))
    }
    return tempControl;
}

编辑半工作新代码（感谢 xrobert35）：

<ion-col radio-group [formControlName]="'col'+i">
    <ion-item *ngFor="let column of row.controls.columns.controls">
        <ion-radio></ion-radio>
    </ion-item>
</ion-col>

这是我按第一个选项，然后按第二个选项，然后按第三个选项时得到的结果：

它用一些奇怪的值更新同一个列。我认为问题在于我不需要 i 作为索引而是 j，但是当我这样做时它会中断。像这样：

<ion-col radio-group >
    <ion-item *ngFor="let column of row.controls.columns.controls; let j = index" [formControlName]="'col'+j">
        <ion-radio></ion-radio>
    </ion-item>
</ion-col>

No value accessor for form control with path: 'rows -> 0 -> col0'

Answer 1

您不能将指令 formControlName 与 ion-radio 一起使用，因为您只能在与 ngModel 一起工作的组件上使用它。

我知道您想要一个 ion-radio 列表，但只有一个值绑定到 formGroup 中。所以你可以像文档中那样使用离子列表组件？并将 [(ngModel)] 替换为 formGroupName

<ion-list radio-group formControlName="myFormGroupName">
  <ion-item>
    <ion-label>Friends</ion-label>
    <ion-radio value="friends" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Family</ion-label>
    <ion-radio value="family"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Enemies</ion-label>
    <ion-radio value="enemies" [disabled]="isDisabled"></ion-radio>
  </ion-item>
</ion-list>

https://ionicframework.com/docs/api/components/radio/RadioButton/

新代码你的html应该看起来像这样

<div [fromGroup]="inspectionTableForm">

<div *ngFor"let question of questions; let indexRow=index" class="row" formArrayName="rows">
   <span> {{question.libelle}} </span>
   <ion-list radio-group [formControlName]="'answer'+indexRow">
       <ion-item *ngFor="let answer of question.answers">
           <ion-label>{{answer.labelle}}</ion-label>
           <ion-radio [value]="answer.value"></ion-radio>
       </ion-item>
   </ion-list>
   <textarea formControlName="comment">
</div>

</div>

Answer 2

如果您有输入数组并且使用反应式方法，最好在您的 FormGroup 中使用 FormArray 而不是使用这种方式。本文档将帮助您在您的代码中实现 FormGroup ： https://angular.io/api/forms/FormArray

FormControlName 不适用于离子收音机

FormControlName not working with ion-radio

ionic-framework

angular

angular-reactive-forms