Currently conducting testing on a basic application. These are the files in use:
home.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: 'home.component.html'
})
export class HomeComponent {
form: FormGroup;
constructor(fb: FormBuilder) {
this.form = new FormGroup({
'firstName': new FormControl('', Validators.required),
'password': new FormControl('', Validators.minLength(5))
});
}
onSubmit() {
console.log('model-based form submitted');
console.log(this.form);
}
}
Accompanying the above is the template file:
<section class="sample-app-content">
<h1>Model-based Form Example:</h1>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-field">
<label>First Name:</label>
<input type="text" formControlName="firstName">
</div>
<div class="form-field">
<label>Password:</label>
<input type="text" formControlName="password">
</div>
<p>
<button type="submit" [disabled]="!form.valid">Submit</button>
</p>
</form>
The issue lies in the correct recognition of Validators, evidenced by enabling the submit button when typing "firstname", but failing to turn the input field red upon leaving it empty.
In light of this, what misstep have I made?
UPDATE:
A live demonstration can be accessed via link below