Angular – FormGroup form errors is null Angular Reactive Forms

angular

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>

Best Answer

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

Related Topic