Recently, I've started diving into Angular Reactive Forms and I'm quite impressed by the async validator feature for tasks that involve checking data against a database. The separation of validation rules from the GUI is also very appealing to me.
To experiment with this, I created a simple login form as follows:
loginForm = this.formBuilder.group({
email: new FormControl(
'',
Validators.compose([Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])
),
password: new FormControl(
'',
Validators.compose([Validators.required, Validators.minLength(8)]
)),
});
Here's the corresponding view code:
<form class="ion-margin" [formGroup]="loginForm" (ngSubmit)="login()">
<ion-item lines="none">
<ion-label position="floating">Email</ion-label>
<ion-input type="text" formControlName="email"></ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="floating">Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-row class="ion-margin">
<ion-button type="submit" color="success" expand="block" [disabled]="loginForm.dirty && !loginForm.valid">Sign in</ion-button>
</ion-row>
</form>
However, I noticed that there are no visual indicators to show why the user cannot submit the form if there are validation errors. In my previous experience with ASP.Net Core projects, the ViewModel/Controller handled model validations similarly.
- I expected the ion-input fields to visually indicate errors since they know their form control names. Am I missing something here?
- Is there a way to provide error messages directly from the .ts file without duplicating information in both the ViewModel and View? Shouldn't it be the Validator's responsibility to handle errors?
- In case of global errors like invalid username-password combinations, should the form manage such information or should it be handled elsewhere?
Apologies for bundling three questions together, but they all stem from the same example and closely relate to each other.