FormControlName не работает с ионным радио

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 = количество вариантов / вопросов, которые мне нужны.

Старый:

Я пытаюсь использовать ионное радио в качестве поля вводав группе форм, но он продолжает выдавать ошибку:

Нет доступа к значению для управления формой с путем ...

Поэтому я переключился на ввод с типом = "радио ", но если я хочу сгруппировать их, мне нужно дать им то же имя, которое я не могу, потому что я использую * 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>

Нет доступа к значению для элемента управления формы с путем: 'строки -> 0 -> col0'

Answer 1

, если у вас есть массив ввода и вы используете реактивный метод, лучше использовать FormArray внутри вашего FormGroup вместо того, чтобы использовать этот способ.эта документация поможет вам реализовать FormGroup в вашем коде: https://angular.io/api/forms/FormArray

Answer 2

Вы не можете использовать директиву formControlName с ion-radio, потому что вы можете использовать ее только с компонентом, который работает с ngModel.

Я понимаю, что вам нужен список ион-радио, но только одно значение связывается с formGroup. Таким образом, вы можете использовать компонент ионного списка, как в документации? и замените [(ngModel)] на 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 должен выглядеть примерно так

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