Today I released angular-reactive-validation
v4.0.1. There were quite a number of breaking changes with Angular 9 Ivy that prevented users of v3.x to upgrade. However, the library is now fully compatible with Angular 9.
For those of you that are not yet aware of what angular-reactive-validation
is: it makes adding validation messages with reactive forms far less convoluted. Instead of writing a lot of HTML elements that show and hide themselves based on validity of a FormControl
:
<form [formGroup]="form">
<div formGroupName="name">
<label>First name:
<input formControlName="firstName">
</label>
<label>Middle name:
<input formControlName="middleName">
</label>
<label>Last name:
<input formControlName="lastName">
</label>
<div *ngIf="firstName.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="firstName.errors.required">
A first name is required
</div>
<div *ngIf="firstName.errors.minlength">
The minimum length is 1
</div>
<div *ngIf="firstName.errors.maxlength">
Maximum length is 50
</div>
</div>
<!-- Repeat for all the other input fields... -->
</div>
<input type="submit" />
</form>
You simply configure FormGroups
like this:
import { Validators } from 'angular-reactive-validation';
...
form = this.fb.group({
name: this.fb.group({
firstName: ['', [Validators.required('A first name is required'),
Validators.minLength(1, minLength => `The minimum length is ${minLength}`),
Validators.maxLength(50, maxLength => `Maximum length is ${maxLength}`)]],
middleName: ['', [Validators.maxLength(50, maxLength => `Maximum length is ${maxLength}`)]],
lastName: ['', [Validators.required('A last name is required'),
Validators.maxLength(50, maxLength => `Maximum length is ${maxLength}`)]]
}),
age: [null, [
Validators.required('An age is required'),
Validators.min(0, 'You can\'t be less than zero years old.'),
Validators.max(150, max => `Can't be more than ${max}`)
]]
});
And then write the following HTML:
<form [formGroup]="form">
<div formGroupName="name">
<label>First name:
<input formControlName="firstName">
</label>
<label>Middle name:
<input formControlName="middleName">
</label>
<label>Last name:
<input formControlName="lastName">
</label>
<arv-validation-messages [for]="['firstName', 'middleName', 'lastName']"></arv-validation-messages>
</div>
<label>Age:
<input type="number" formControlName="age">
</label>
<arv-validation-messages for="age"></arv-validation-messages>
<input type="submit" />
</form>