angular form submit validation code example
Example 1: custom validator
import {AbstractControl, ValidatorFn} from '@angular/forms';
export function blue(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null =>
control.value?.toLowerCase() === 'blue'
? null : {wrongColor: control.value};
}
<>
Example 2: angularjs form validation on submit
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>
Example 3: validation minlength angular
Validators.minLength(9)
Example 4: formgroup check if valid
form: FormGroup;
onSubmit(){
if( this.form.valid){
}
}