<form [formGroup]="loginForm" (ngSubmit)="onSubmit()" novalidate>
Email:
<input type="text" formControlName="email"/>
<span *ngIf="loginForm.controls.email.touched && loginForm.controls.email.errors?.required">
Please enter email address.!
</span>
<span *ngIf="loginForm.controls.email.touched && loginForm.controls.email.errors?.email">
Email address not well formed.!
</span>
<br>
Password:
<input type="text" formControlName="password"/>
<br>
<input type="submit" [disabled]="!loginForm.valid"/>
</form>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
loginForm: FormGroup;
constructor() {
this.loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required])
});
}
onSubmit() {
if(this.loginForm.valid) {
console.log(this._v());
}
}
_v() {
return this.loginForm.value;
}
}