Styjun

I am trying to add an error class when a form element has an invalid value but I can not access it and I can not figure how to do it.

code.component.ts

this.dateRangeForm = this.fb.group(
 from: this.fb.group(
 fromYear: new FormControl(null, [ValidYearsValidator]),
 fromMonth: new FormControl(null, []),
 fromDay: new FormControl(null, [])
 ),
 to: this.fb.group(
 toYear: new FormControl(null, []),
 toMonth: new FormControl(null, []),
 toDay: new FormControl(null, [])
 )
 );

code.component.html

<form [formGroup]="dateRangeForm">
 <span formGroupName="from">
 <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
 size="4" [class.error]="!fromYear.valid">

My problem is in the last input of the code below. I am trying to access the fromYear.valid property but I get this error after loading the form:

ERROR TypeError: Cannot read property 'valid' of undefined

You the access the controls using dateGroupForm.controls.from.controls.fromYear.

You can then access the properties of that control (value,status etc.) using dateGroupForm.controls.from.controls.fromYear.value.

If you want to get the status of a form control inside of a nested form group this is the way to access it:

 <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
 size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">

dateRangeForm.controls.from.controls.fromYear.valid

You need to provide a get method in your component to access the fromYear property.

Example:

get fromYear()
 return this.dateRangeForm.get('from.fromYear');