How I can access my properties inside the FormGroup? I need to access some properties (touched and errors)

Question

I have this problem: Property 'institutionName' does not exist on type 'FormGroup'.

*ngIf="frmStepperControl.institutionName.touched && frmStepper.institutionName.errors?.required">

My ts code

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, AbstractControl, FormGroup, FormControl, FormArray} from '@angular/forms'


@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {

  
  frmValues: object = {};
  frmStepper: FormGroup;

  public get formArray(): AbstractControl {
   // console.log(this.frmStepper.get('steps'));
    return this.frmStepper.get('steps');
  }

  public get frmStepperControl(){
    console.log(this.frmStepper.get('steps')['controls'].controls.institutionName);
    return this.frmStepper.get('steps')['controls'];
  } 

  constructor(private fb: FormBuilder) { 
  }

  ngOnInit(): void {
    this.frmStepper = this.fb.group({
      steps: this.fb.array([
        this.fb.group({
         ieCode: [''],
         institutionName: ['', Validators.compose([Validators.required])],
        }),
        this.fb.group({
          telephone1: [null],
        }),
      ])
     });
  }

  
  submit(): void {
    console.log(this.frmStepper.value.steps[0].institutionName);
    //this.frmValues = this.frmStepper.value;
  }
  
}

My html code where I'm trying access the touched and errors properties from my institutionName property

 <form  [formGroup]="frmStepper" (ngSubmit)="submit()">
    <timeline-stepper #cdkStepper formArrayName="steps" [linear]="true">

        <cdk-step [editable]="false" formGroupName="0" [stepControl]="formArray.get([0])" class="form-cdk">

            <div class="row">
                <p>Instituição de ensino</p>
                <div class="horizontal-divider"></div>
                <div class="form-group col-md-6">
                    <label for="ieCode">Código da IE/IF</label>
                    <input formControlName="ieCode" type="text" class="form-control" id="ieCode" placeholder="Escreva aqui...">
                </div>
                <div class="form-group col-md-6">
                    <label for="institutionName">Nome da Instituição*</label>
                    <input formControlName="institutionName" type="text" class="form-control" id="institutionName"
                        placeholder="Escreva aqui..."
                        required>
                        <span class="text-danger"
                            *ngIf="frmStepperControl.institutionName.touched && frmStepper.institutionName.errors?.required">
                            Nome da Instituição é obrigatória
                        </span>
                </div>
            </div>

            <footer class="row">

                <div class="col-md-6"></div>

      
                <div class="form-group col-md-3">
                    <button type="button" class="btn btn-primary next" cdkStepperNext>PRÓXIMO</button>
                </div>
            </footer>

        </cdk-step>

        <cdk-step #contacts [editable]="false" formGroupName="1" [stepControl]="formArray.get([1])">

            <div class="row">
                <div class="form-group col-md-6">
                    <label for="telephone1">Telef.1</label>
                    <input formControlName="telephone1" type="number" class="form-control" id="telephone1" placeholder="Escreva aqui.">
                </div>
            </div>

            <footer class="row lastRow">
                
                <div class="form-group col-md-3">
                    <button type="submit" class="btn btn-primary next">PRÓXIMO</button>
                </div>
            </footer>
        </cdk-step>
    </timeline-stepper>
</form>

Property 'institutionName' does not exist on type 'FormGroup'. I'm facing this problem.

Answer 1

In you HTML you have frmStepper.InstitutionName.errors

Should be frmStepperControl.InstitutionName.errors