新:
所以我可以在没有无线电组或没有正确绑定的情况下使用它。我无法与它们合作。
这是允许的:
<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>
但同样的错误:
错误:没有带路径的表单控件的值访问器:'rows - > 0 - > col0'
i =我需要的行数。 j =我需要的选项/问题的数量。
旧:
我试图使用离子无线电作为表格组中的输入字段,但它不断给我错误:
没有用于路径的表单控件的值访问器...
所以我切换到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>
按下第一个选项,然后是第二个选项,然后是第三个选项,这就是我得到的:
它以一些奇怪的值更新相同的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>
没有用于路径的表单控件的值访问器:'rows - > 0 - > col0'
您不能将指令formControlName与ion-radio一起使用,因为您只能在使用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>
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>
如果你有输入数组并使用反应式方法,最好在你的FormArray
中使用FormGroup
而不是这样使用。本文档将帮助您在您的代码中实现FormGroup
:https://angular.io/api/forms/FormArray