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
You can check the stackblitz here StackBlitz