O Angular tem um validador muito bom, o Validators. Segue um exemplo de como implementá-lo:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { patternValidator } from 'app/shared/pattern-validator';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.createForm();
}
private createForm() {
this.loginForm = new FormGroup({
// tslint:disable-next-line
email: new FormControl('', [Validators.required, patternValidator(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]),
password: new FormControl('', Validators.required),
});
}
public login() {
console.log(this.loginForm.value);
}
}
Para criar o patternValidator:
import { AbstractControl, ValidatorFn, FormGroup } from '@angular/forms';
export function patternValidator(regexp: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
const value = control.value;
if (value === '') {
return null;
}
return !regexp.test(value) ? { 'patternInvalid': { regexp } } : null;
};
}
Insira uma tag form com o formGroup envolvendo seu formulário: . E seu input deve conter formControlName e mdInput: .
Segue um exemplo:
<md-card>
<md-card-title>Connection</md-card-title>
<md-card-content>
<form [formGroup]="loginForm">
<md-input-container [ngClass]="{'error': loginForm.controls['email'].errors && !loginForm.controls['email'].pristine}" dividerColor="{{loginForm.controls['email'].errors && !loginForm.controls['email'].pristine ? 'warn' : 'primary'}}">
<input type="email" mdInput formControlName="email" placeholder="Email" required>
<div *ngIf="loginForm.controls['email'].errors && !loginForm.controls['email'].pristine" class="error-msg">
<div [hidden]="!loginForm.controls['email'].errors.required">Email is required.</div>
<div [hidden]="!loginForm.controls['email'].errors.patternInvalid">Email is invalid.</div>
</div>
</md-input-container>
<md-input-container [ngClass]="{'error': loginForm.controls['password'].errors && !loginForm.controls['password'].pristine}"
dividerColor="{{loginForm.controls['password'].errors && !loginForm.controls['password'].pristine ? 'warn' : 'primary'}}">
<input type="password" mdInput formControlName="password" placeholder="Password" required>
<div *ngIf="loginForm.controls['password'].errors && !loginForm.controls['password'].pristine" class="error-msg">
<div [hidden]="!loginForm.controls['password'].errors.required">Password is required.</div>
</div>
</md-input-container>
</form>
</md-card-content>
<md-card-actions align="end">
<button md-raised-button class="btn" [disabled]="loginForm.invalid" (click)="login()">Login</button>
</md-card-actions>
</md-card>
Segui este exemplo e deu certo, usei no Ionic 3. Mudei apenas o necessário para adaptar ao meu problema. Este é o link do artigo, espero que ajude.