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>

但还是同样的错误：

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

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

旧版本：

我正在尝试将离子无线电用作表单组中的输入字段，但是它一直给我错误：

没有用于带有路径...的表单控制的值访问器

所以我切换到类型为“ 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>

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

FormControlName无法与离子无线电配合使用

0 个答案: