Angular FormControlName不适用于离子收音机

新建：

所以我可以让它在没有合适的绑定的情况下与你的广播组一起工作。我不能让这两者都起作用

这是允许的：

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

但同样的错误是：

错误：路径为“行->0->列0”的窗体控件没有值访问器

i=我需要的行数。 j=我需要的选项/问题的数量

旧版：

我试图使用离子无线电作为formgroup中的输入字段，但它不断给我错误：

没有路径为“”的窗体控件的值访问器

所以我用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;
}

this.inspectionTableForm=this.formBuilder.group({
标题：this.formBuilder.group({
标题：[this.question.properties.header[0]]，
列：this.formBuilder.array([
此.formBuilder.control（“”）
]),
评论：['']
}),
行：this.formBuilder.array([
this.initRow（）
])
});
私有initRow（）{
//创建临时控件
让tempControl=this.formBuilder.group({
标题：“”，
});
//为列创建一个数组
设arr=[]；
for（让index=0；index

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

这是我按下第一个选项、第二个选项和第三个选项时得到的结果：

它用一些奇怪的值更新同一列。我想问题是我不需要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>

路径为：“行->0->列0”的窗体控件没有值访问器

---

您不能将指令formControlName与离子无线电一起使用，因为您只能在使用ngModel的组件上使用它

我知道您想要一个离子无线电列表，但只有一个值绑定到formGroup中。那么您可以使用文档中的离子列表组件？并用formGroupName替换[（ngModel）]

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

朋友
家庭
敌人

新代码您的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>

{{问题.诽谤}
{{答案.标签}

如果您有输入数组，并且使用反应式方法，那么最好在ur

FormGroup

中使用

FormArray

，而不是这样使用。 本文档将帮助您在ur代码中实现

FormGroup

：

---

什么错误？我在OPI转换为数组的过程中没有看到任何更新的错误消息，但是我仍然没有得到任何值。如果我这样做，我仍然没有得到任何值更改。你说的没有值更改是什么意思？控件“myFormGroupName”的值在formGroup中没有更新？是的，没错（我用新代码更新了OP）。如果我使用formControlName，它会说：找不到值访问器。如果我只使用formArray，就不会有任何更改。我想我不明白您试图做什么。您能在组件中提供FormGroup的“创建”吗？ion radio不是与ngModel一起工作的组件，因此不能添加formControlName，这是正常的。我不明白你想用这些收音机做什么，你想把它当作一个复选框来使用？我想创建一个“动态”表格。您可以在其中指定列（最多3个）和任意多的行。每行将有一个标题、1-3个单选按钮（选项）和一个可选的注释字段。所以每一行基本上都是一个问题，你可以选择一个答案（一个单选按钮），也许还可以添加一条评论。我将把创建添加到OP中。

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