FormControlName不适用于离子无线电 [英] FormControlName not working with ion-radio

问题描述

新功能:

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.

这是允许的:

<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移动到它的中断点.我真的不知道如何使它工作.

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>

但还是同样的错误:

错误:表单控件的无值访问器，其路径为:'行-> 0-> col0'

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

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

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

所以我切换到类型为"radio"的输入，但是如果要对它们进行分组，我需要给它们起相同的名称，因为我使用的是* ngFor，所以我不能这样做，否则我的formControlName是不再正确了.

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>

创作:

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

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:

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

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>

没有用于窗体控制的值访问器，其路径为:'行-> 0-> col0'

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

推荐答案

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

You can't use the directive formControlName with ion-radio cause you can only use it on a component which work with ngModel.

我知道您需要一个离子无线电列表，但是只有一个值绑定到formGroup中.因此，您可以像在文档中一样使用离子列表组件?并将[(ngModel)]替换为formGroupName

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/

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

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不适用于离子无线电的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！