How to validate error messages for nested form group fields in angular

Question

Hi i am new for angular and i am trying to implement form validations and using below code and my problem is nested form group fields i am getting errors in log TypeError: Cannot read property 'touched' of null can some one help me please..

.ts

 ngOnInit() {
    this.employeeForm = this.fb.group({
      fullName: ['',[Validators.required,Validators.minLength(2), Validators.maxLength(10)]],
      email: ['',[Validators.required,Validators.email]],
      skills: this.fb.group({
        skillName: ['',[Validators.required]],
        experienceInYears: ['',Validators.required],
        proficiency: ['']
      })
    });
  }

.html

<form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmit()">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Create Employee</h3>
    </div>

    <div class="panel-body">

      <div class="form-group" [ngClass]="{'has-error':((employeeForm.get('fullName').touched ||
      employeeForm.get('fullName').dirty) &&
      employeeForm.get('fullName').errors)}">
        <label class="col-sm-2 control-label" for="fullName">Full Name</label>
        <div class="col-sm-8">
          <input id="fullName" type="text" class="form-control" formControlName="fullName">
          <span class="help-block" *ngIf="((employeeForm.get('fullName').touched ||
          employeeForm.get('fullName').dirty) &&
          employeeForm.get('fullName').errors)">
            <span *ngIf="employeeForm.get('fullName').errors.required">
              Full Name is required
            </span>
            <span *ngIf="employeeForm.get('fullName').errors.minlength ||
                   employeeForm.get('fullName').errors.maxlength">
              Full Name must be greater than 2 characters and less than 10 characters
            </span>
          </span>
        </div>
      </div>

      <div class="form-group" [ngClass]="{'has-error':((employeeForm.get('email').touched ||
      employeeForm.get('email').dirty) &&
      employeeForm.get('email').errors)}">
        <label class="col-sm-2 control-label" for="email">Email</label>
        <div class="col-sm-8">
          <input id="email" type="text" class="form-control" formControlName="email">
          <span class="help-block" *ngIf="((employeeForm.get('email').touched ||
          employeeForm.get('email').dirty) &&
          employeeForm.get('email').errors)">
            <span *ngIf="employeeForm.get('email').errors.required">
              Email is required
            </span>
            <span *ngIf="employeeForm.get('email').errors.email">
              Valid Email is required
            </span>
          </span>
        </div>
      </div>

    //**PROBLEM IN THIS BLOCK**
      <div formGroupName="skills">

        <div class="form-group" [ngClass]="{'has-error':((employeeForm.get('skillName').touched ||
        employeeForm.get('skillName').dirty) &&
        employeeForm.get('skillName').errors)}">
          <label class="col-sm-2 control-label" for="skillName">skill Name</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" formControlName="skillName">

            <span class="help-block" *ngIf="((employeeForm.get('skillName').touched ||
            employeeForm.get('skillName').dirty) &&
            employeeForm.get('skillName').errors)">
              <span class="help-block" *ngIf="employeeForm.get('skillName').errors.required">
                Skill is required
              </span>
            </span>
          </div>
          <div class="col-sm-4">
            <input type="text" class="form-control" formControlName="experienceInYears">
            <span class="help-block" *ngIf="((employeeForm.get('experienceInYears').touched ||
            employeeForm.get('experienceInYears').dirty) &&
            employeeForm.get('experienceInYears').errors)">
              <span class="help-block" *ngIf="employeeForm.get('experienceInYears').errors.required">
                Experience is required
              </span>
            </span>
          </div>

        </div>

      </div>

    </div>

<div class="panel-footer">
  <div class="btn-toolbar">
    <button class="btn btn-primary" type="submit">Save</button>
    <button class="btn btn-primary" type="submit" (click)="onLoadDataClick()">Load Data</button>
  </div>
</div>

Judaism

Use these employeeForm.get('fullName').touched, etc with safe navigation employeeForm.get('fullName')?.touched – Dateless

i am not getting errors in that block – Judaism

I clearly mentioned i am getting errors in nested form – Judaism

Answer 1

Be aware of the fact that, you have nested your form one level by folder called, 'skills'. Hence, you need to honor that by,

employeeForm.get('skills.skillName').touched

Edana