Динамически добавлять formControl при генерации в шаблоне

Question

Я создаю приложение, которое получает набор вопросов и ответов, собранных из реального демографического опроса, хранящегося в бэкэнде REST API django. Я разделил опрос на компоненты, основанные на категориях вопросов (например, вопросы, касающиеся здоровья, демографии, доходов и т. Д.). Конкретные предлагаемые ответы на вопрос имеют уникальные идентификаторы, которые указывают на идентификатор вопроса и идентификатор опроса, они также имеют свойство «тип», которое указывает, запрашивает ли ответ сумму, текст и т. Д. У родительского компонента «Опрос» есть дочерний элемент. Компоненты «Category», которые наследуют родительскую «FormGroup» через @ Input.

salud.component.html

<form [formGroup]="encuestaHogarForm" class="container">
    <!-- primary questions -->
  <div *ngFor="let textoPregunta of preguntasUnicas; let i = index">
    <h3 id="label{{i}}">{{textoPregunta}}</h3>
    <ng-container *ngFor="let p of preguntas">
      <ng-container *ngIf="textoPregunta === p.preguntaxencuesta.pregunta.texto_pregunta">
        <!-- primary answers that belong to a question -->
        <span [ngSwitch]="p.tipo">
          <p *ngSwitchCase="'B'">
            <mat-radio-button name="rbRes{{p.preguntaxencuesta.id}}" aria-labelledby="label{{i}}"
              formControlName="valorRP{{p.id}}">{{p.respuesta_propuesta.texto_respuesta}}</mat-radio-button>
          </p>
          <p *ngSwitchCase="'C'">

          </p>
          <!-- secondary questions that belong to a primary question-answer -->
          <ng-container *ngFor="let p2 of preguntasSecundarias"> 
            <ng-container *ngIf="p2.preguntasecundariaxresp.preguntaxencuestaxrespuesta.id === p.id">
              <mat-form-field *ngIf="p2.tipo === 'C'">
                <input matInput placeholder="{{p2.preguntasecundariaxresp.pregunta_secundaria.texto_pregunta}}">
              </mat-form-field>
            </ng-container>
          </ng-container>
        </span>
    </ng-container>
  </ng-container>
</div>
</form>

Я хочу присвоить formControlName длядинамически сгенерированный mat-radio-button, чтобы иметь возможность добавить его в мою encuestaHogarForm родительскую форму. Я рассмотрел использование FormArray, но я не знаю, как динамически выдвигать элементы при их создании в DOM в FormArray.

Я пытался назначить formControlName="valorRP{{p.id}}" таким же образомв моем component.ts

salud.component.ts

...

getPreguntas(): void {
    this.encuestaService.getPreguntasPrimariasPorCategoria(this.categoria)
      .subscribe(preguntas => {
        this.preguntas = preguntas;
        this.preguntasUnicas = [...new Set(preguntas.map(array => array.preguntaxencuesta.pregunta.texto_pregunta))];
        this.preguntasUnicas.forEach(textoPregunta => {
          this.preguntas.forEach(p => {
            if (textoPregunta === p.preguntaxencuesta.pregunta.texto_pregunta) {
              this.encuestaHogarForm.addControl('valorRP' + p.id, new FormControl()); // Attempts to register the controls
              this.preguntasSecundarias.forEach(p2 => {
                if (p2.preguntasecundariaxresp.preguntaxencuestaxrespuesta.url === p.url) {
                  //console.log('- ' + p2.preguntasecundariaxresp.pregunta_secundaria.texto_pregunta);
                }
              });
            }
          });
        });
      });
  }

...

Однако это не работает должным образом, потому что я предполагаю, что он пытается найти formControlName в DOM до его создания

Answer 1

Хосе, убедитесь, что вы инициализируете formGroup

encuestaHogarForm=new FormGroup({})

MoreOver, вы также можете перебирать encuestaHogarForm.controls | keyvalue, а не preguntasUnicas, например, просто в stackblitz

<button (click)="add()">Add</button>
<form [formGroup]="myForm">
  <div *ngFor="let control of myForm.controls|keyvalue;let i=index" >
    {{questions[i]}}
       <input [formControl]="myForm.get('valorRP'+i)">
  </div>
</form>

  myForm=new FormGroup({})
  questions=["uno","dos","tres","cuatro"]
  add()
  {
    const index=Object.keys(this.myForm.controls).length
    this.myForm.addControl('valorRP'+index,new FormControl(null))
  }