How to access information from a formGroup that is embedded in a Formarray

Question

Guys, I have a form created with formBuilder. This form consists of a structure that has an array within an array.

My form:

export class RoteiroAddForm extends FormComponent<any>{

  constructor(private readonly formBuilder: FormBuilder) {
    super(formBuilder.group({}))
  }

  roteiroTeste = this.formBuilder.group({
    dadosGerais: this.formBuilder.group({
      nomeRoteiro: [''],
      sistema: [''],
      casouso: [''],
      requisitante: [''],
      gerenteProjeto: [''],
    }),
    cenarios: this.formBuilder.array([
      this.formBuilder.group({
        nomeCenario: [''],
        casosTestes: this.formBuilder.array([
          this.formBuilder.group({
            nomeCasoTeste: [''],
            descricao: [''],
            preCondicao: this.formBuilder.array([
              this.formBuilder.group({
                descricaoPreCondicao: [''],
              })
            ]),
            resultadoEsperado: [''],
            procedimentos: this.formBuilder.array([
              this.formBuilder.group({
                criterioProcedimento: [''],
                descricaoPassoProcedimento: ['']
              }),
              this.formBuilder.group({
                descricaoVerificacaoProcedimento: [''],

              })
            ]),
            posCondicao: ['']
          })
        ])
      })
    ])
  })

I am unable to access my formControlName: nameCenario that is inside the array of scenarios.

My scenario inclusion method:

incluirCenario() {

    this.cenario.nome = this.roteiroAddForm.nomeCenario;
    this.cenarios.push({ ...this.cenario })

  }

My HTML is like this:

<mat-step [stepControl]="roteiroAddForm.roteiroTeste">
      <form [formGroup]="roteiroAddForm.roteiroTeste">

        <div formArrayName="cenarios">
          <ng-template matStepLabel>Cenários / Casos de teste</ng-template>
          <mat-card>
            <mat-card-title>Cadastrar Cenário</mat-card-title>
            <mat-form-field appearance="outline" style="width:40%">
              <mat-label>Nome do Cenário:</mat-label>
              <input matInput type="text" formControlName="nomeCenario" maxlength="100" />
            </mat-form-field>

            <!--[disabled]="!roteiroAddForm.nomeCenario"-->
            <button mat-button (click)="incluirCenario(cenario)" color="primary">Incluir
              <mat-icon>add</mat-icon>
            </button>
          </mat-card>

        </div>
      </form>

I need to somehow get the information from formControlName= nameCenario for the scenario array, I’ve tried it in several ways and I’m not getting the value passed in input;

Error presented:

RoteiroAddComponent.html:66 ERROR Error: Cannot find control with path: 'cenarios -> nomeCenario'

Answer 1

Right, inside your Component you can create a get

 get formControlCompanies(): FormArray { return <FormArray>this.roteiroTeste .get('cenarios'); }

where you need to call you will use

formControlCompanies.invalid, etc...

html would look something like this

<div class="form-box_scroll_company mt-3" formArrayName="cenarios">
               <div class="row" *ngFor="let formItemCenarios of formControlCompanies.controls; let i = index;" [formGroupName]="i">

and to access elsewhere some item would look like this, access the name within formArray:

formControlName="nomeItem"

has other approaches too,

formItemCenarios.formGroup['controls']['name'].errors