FormGroup form errors is null Angular Reactive Forms

Question

When using Reactive Forms, a formGroup containing FormControls which are invalid(invalid form) is shown as invalid which is normal, but it does not contain any errors.

I should be able to get all the errors from the form in the formGroup.errors but it is null

However, The form state is invalid and under every invalid formControl it gives me the validation error What am I missing ?

check for errors:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { DB1 } from 'src/app/interfaces/IDB';
import { DBS } from 'src/app/consts';
@Component({
  selector: 'app-new-dashboard',
  templateUrl: './new-dashboard.component.html',
  styleUrls: ['./new-dashboard.component.scss']
})
export class NewDashboardComponent implements OnInit {
  dbs: string[] = ["DB1", "DB2"]
  selectAxisOptions:string[]  = []
  newDashboardForm = new FormGroup({
    name: new FormControl(null, [Validators.required]),
    db: new FormControl(null, [Validators.required]),
    axis: new FormControl({ value: null, disabled: true }, [Validators.required])
  })
  constructor() { }

  ngOnInit() {
  }
  resetForm() {
    this.newDashboardForm.reset()
  }
  onSelectionChanged(evt) {
    let value = evt.target.value;
    this.axis.enable();
    switch (value) {
      case 'DB1':
        {
          this.selectAxisOptions = [...DBS.get("DB1").values()]
          break;
        }
      case 'DB2':
        {
          this.selectAxisOptions = [...DBS.get("DB2").values()]
          break;
        }

    }
  }
  onSubmit() {
    console.log(this.newDashboardForm);


  }
  get name() {
    return this.newDashboardForm.get('name')
  }
  get db() {
    return this.newDashboardForm.get('db')
  }
  get axis() {
    return this.newDashboardForm.get('axis')
  }
}

html:

<div class="modal-body">
    <form [formGroup]="newDashboardForm" (ngSubmit)="onSubmit()">
        <input formControlName="name" type="text" class="form-control" placeholder="Dashboard Name">
        <select formControlName="db" (change)="onSelectionChanged($event)" class="custom-select">
            <option disabled="true" [selected]="true">select DB</option>
            <option *ngFor="let db of dbs">{{db}}</option>
        </select>
        <select formControlName="axis" class="custom-select">
            <option disabled="true" [selected]="true">select column</option>
            <option *ngFor="let column of selectAxisOptions">{{column}}</option>
        </select>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Create Dashboard</button>
        </div>
    </form>
</div>

Is the first list missing this keyword in the first line of the code (so instead of newDashboardForm shouldn't it be this.newDashboardForm)? — kasptom
invalid is also true when child elements are validated and invalid, but for every group, even the form, the errors property only contains errors for that control itself. In other words: You only see errors in the form control if you added a validation to the form itself. Currently you only added validation errors to every child control. So you have to read the errors from every control. — Silvermind
got you, how do I add the functionality of seeing the invalid fields in the errors of the formGroup ? — MD10

Vins Vins · Accepted Answer · 2021-04-22T15:10:52

You have validators on single form control, not on the whole form group. Then you have errors only on the invalid field. You can loop every control and get every single form control error like that

  onSubmit() {
    // Get all Form Controls keys and loop them
    Object.keys(this.newDashboardForm.controls).forEach(key => {
      // Get errors of every form control
      console.log(this.newDashboardForm.get(key).errors);
    });
  }

You can check the stackblitz here StackBlitz

FormGroup form errors is null Angular Reactive Forms

3 Answers