Cannot read property 'hasError' of undefined on nested form group in angular

Question

I keep having an error of "Cannot read property 'hasError' of undefined" when creating a validation for my nested group. On the main group, I do not have problems but if it is on the nested form group, that's where the issue comes. Please see my codes below:

<form
    [formGroup]="form"
    (ngSubmit)="onSubmit(form)"
    class="border border-light p-5"
  >
    <div class="form-group">
      <input
        type="text"
        placeholder="Plaza Name"
        formControlName="name"
        id="name"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="formHasError('name', 'required') && isSubmitted"
        style="color: red;"
      >
        Plaza Name is required
      </span>
    </div>
    <div class="form-group">
      <input
        type="number"
        placeholder="Plaza Code"
        formControlName="code"
        id="code"
        class="form-control mb-4"
        mdbInput
        required
      />
      <span
        *ngIf="formHasError('code', 'required') && isSubmitted"
        style="color: red;"
      >
        Plaza code is required
      </span>
    </div>

    <div formGroupName="lanes">
      <div class="form-group">
        <input
          type="number"
          placeholder="Lane Number"
          formControlName="number"
          id="number"
          class="form-control mb-4"
          mdbInput
          required
        />
        <span
          *ngIf="formHasError('lanes.number', 'required') && isSubmitted"
          style="color: red;"
        >
          Lane number is required
        </span>
      </div>
      <div class="form-group">
        <select
          formControlName="type"
          id="type"
          class="browser-default custom-select mb-4"
          mdbInput
          required
        >
          <option *ngFor="let type of typeSelect" [value]="type.label">{{
            type.label
          }}</option>
        </select>
        <!-- <span
          *ngIf="formHasError('lanes.type', 'required') && isSubmitted"
          style="color: red;"
        >
          Select a lane type
        </span> -->
      </div>
    </div>
    <button
      mdbBtn
      color="info"
      outline="true"
      block="true"
      class="z-depth-0 my-4 waves-effect"
      mdbWavesEffect
      type="submit"
    >
      Send
    </button>
 </form>

This is in the ts file

createForm() {
    this.form =  this.fb.group({
      name: [null, Validators.required],
      code: [null, Validators.required],
      lanes: this.fb.group({
        number: [null, Validators.required],
        type: [null, Validators.required]
      })
    });
}

formHasError(controlName: string, errorName: string) {
   return this.form.controls[controlName].hasError(errorName);
}

Can you please show me how to do this right? THank you.

Answer 1

stackblitz

formHasError(controlName: string, errorName: string) {
    const control=this.form.get(controlName);
    return control?control.hasError(errorName):false;
  }