FormControlName 不适用于 ion-radio [英] FormControlName not working with ion-radio
问题描述
新:
所以我可以让它在没有无线电组或没有正确绑定的情况下工作.我不能让它与两者一起工作.
这是允许的:
<ion-list radio-group [formControlName]="'col'+j"><ion-radio></ion-radio></ion-list>
但是我没有包含广播组的列表,无论我更改什么,它总是会中断.如果我将列表移到它的外面,请移动它断开的 formControlName.我真的不知道如何让它发挥作用.
我认为这应该是要走的路:
<div *ngFor="let 列的列;让 j = 索引"><div [formControlName]="'col'+j"><ion-radio></ion-radio>
</ion-list>
但同样的错误:
<块引用>错误:没有用于具有路径的表单控件的值访问器:'rows -> 0 -> col0'
i = 我需要的行数.j = 我需要的选项/问题的数量.
旧的:
我正在尝试使用 ion-radio 作为表单组中的输入字段,但它一直给我错误:
<块引用>没有用于带有路径的表单控件的值访问器...
所以我切换到 type="radio" 的输入,但是如果我想将它们分组,我需要给它们相同的名称,我不能这样做,因为我使用的是 *ngFor 否则我的 formControlName 是不再正确.
谁能帮我让离子无线电工作?分组看起来更好更容易.
<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({标题:this.formBuilder.group({标题:[this.question.properties.header[0]],列:this.formBuilder.array([this.formBuilder.control('')]),注释: ['']}),行:this.formBuilder.array([this.initRow()])});私人 initRow() {//创建温度控制让 tempControl = this.formBuilder.group({标题: '',});//为列创建一个数组让 arr = [];for (let index = 0; index < this.question.properties["number-of-columns"]; index++) {//将一个控件推送到数组,也推送一个控件到更高级别的值arr.push(this.columns[index])tempControl.addControl(`col${index}`, this.formBuilder.control(''))//Col-1-2-3};tempControl.addControl('columns', this.formBuilder.array(arr))//数组//检查我们是否需要添加评论字段如果 (this.question.properties["comment-field"]) {tempControl.addControl('comment', this.formBuilder.control(''))}返回温度控制;}
编辑半工作的新代码(感谢 xrobert35):
<ion-item *ngFor="let column of row.controls.columns.controls"><ion-radio></ion-radio></ion-item></ion-col>
这是我按第一个选项,然后是第二个和第三个选项时得到的结果:
它用一些奇怪的值更新相同的列.我认为问题在于我不需要 i 作为索引而是 j,但是当我这样做时它会中断.像这样:
<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 一起使用的组件上使用它.
我知道您想要一个 ion-radio 列表,但只有一个值绑定到 formGroup 中.因此,您可以使用文档中的 ion-list 组件?并将 [(ngModel)] 替换为 formGroupName
<离子项目><ion-label>朋友</ion-label><ion-radio value="friends"checked></ion-radio></ion-item><离子项目><ion-label>Family</ion-label><ion-radio value="family"></ion-radio></ion-item><离子项目><ion-label>敌人</ion-label><ion-radio value="enemies" [disabled]="isDisabled"></ion-radio></ion-item></ion-list>
https://ionicframework.com/docs/api/components/radio/单选按钮/
新代码你的 html 应该像这样
<div *ngFor"let question of questions; let indexRow=index" class="row" formArrayName="rows"><跨度>{{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">
New:
So I can get it to work withou a radio-group or withouth the right bindings. I can't get it to work with both.
This is allowed:
<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>
But then I don't have a list with a radio-group, it doesn't matter what I change it will always break. If I move the list outside it breaks, move the formControlName it breaks. I really don't know how to get this to work.
I would think that this should be the way to go:
<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>
But again the same error:
Error: No value accessor for form control with path: 'rows -> 0 -> col0'
i = the amount of rows I need. j = the amount of options/questions I need.
Old:
I am trying to use the ion-radio as a input field in a formgroup but it keeps giving me the error:
No value accessor for form control with path ...
So I switched to an input with type="radio", but if I want to group those, I need to give them the same name, which I can't because I am using a *ngFor and otherwise my formControlName is not correct anymore.
Can anybody help me to get the ion-radio to work? It would look better and easier to group.
<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>
Creation:
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;
}
Edit semi working new code (thanks 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>
This is what I get when I press the first option, then second and then third:
It updates the same col with some weird value. I think the problem is that I do not need i as index but j, but it breaks when I do that. Something like this:
<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'
You can't use the directive formControlName with ion-radio cause you can only use it on a component which work with ngModel.
I understand that you want a list of ion-radio but only one value bind into the formGroup. So you can use a ion-list component like in the documentation ? and replace the [(ngModel)] by 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/
New code Your html should look like something like this
<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>
这篇关于FormControlName 不适用于 ion-radio的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!