I'm working on a form control and attempting to change the color when the field is invalid. I've experimented with various methods, but haven't had success so far. Here's what I've tried:
<input
formControlName="personNameField"
type="text"
placeholder="Please enter"
[ngClass]="{'error': personNameField.errors}"
></input>
Here's how my TypeScript form control is set up:
form = this.builder.group({
personNameField: new FormControl('',
[Validators.required]),
});
getName(){
this.form.get('personNameField')
}
However, I keep encountering this error:
ERROR TypeError: Cannot read properties of undefined (reading 'errors')
Any insights into what might be going wrong?
UPDATE: I've added the getter and removed the question mark, but still, the bordering isn't working – only the error message is displayed.
Update2:
.error {
// underline input field on error
border: 1px solid red;
display: block;
color: red;
}
Desired Result: https://i.sstatic.net/QRNvK.png
Actual Outcome: https://i.sstatic.net/VprQA.png