ng-valid The field content is valid. ng-invalid The field content is not valid. ng-valid-key One key for each validation. Example: ng-valid-required , useful when there are more than one thing that must be validated.
Form validation is an important part of web application. It is used to validate whether the user input is in correct format or not.
in component:
formData.form.controls['email'].setErrors({'incorrect': true});
and in HTML:
<input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email" #email="ngModel">
<div *ngIf="!email.valid">{{email.errors| json}}</div>
Adding to Julia Passynkova's answer
To set validation error in component:
formData.form.controls['email'].setErrors({'incorrect': true});
To unset validation error in component:
formData.form.controls['email'].setErrors(null);
Be careful with unsetting the errors using null
as this will overwrite all errors. If you want to keep some around you may have to check for the existence of other errors first:
if (isIncorrectOnlyError){
formData.form.controls['email'].setErrors(null);
}
In new version of material 2 which its control name starts with mat prefix setErrors() doesn't work, instead Juila's answer can be changed to:
formData.form.controls['email'].markAsTouched();
I was trying to call setErrors()
inside a ngModelChange handler in a template form. It did not work until I waited one tick with setTimeout()
:
template:
<input type="password" [(ngModel)]="user.password" class="form-control"
id="password" name="password" required (ngModelChange)="checkPasswords()">
<input type="password" [(ngModel)]="pwConfirm" class="form-control"
id="pwConfirm" name="pwConfirm" required (ngModelChange)="checkPasswords()"
#pwConfirmModel="ngModel">
<div [hidden]="pwConfirmModel.valid || pwConfirmModel.pristine" class="alert-danger">
Passwords do not match
</div>
component:
@ViewChild('pwConfirmModel') pwConfirmModel: NgModel;
checkPasswords() {
if (this.pwConfirm.length >= this.user.password.length &&
this.pwConfirm !== this.user.password) {
console.log('passwords do not match');
// setErrors() must be called after change detection runs
setTimeout(() => this.pwConfirmModel.control.setErrors({'nomatch': true}) );
} else {
// to clear the error, we don't have to wait
this.pwConfirmModel.control.setErrors(null);
}
}
Gotchas like this are making me prefer reactive forms.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With