In this Article, we will see “How Angular 5/4 forms are used or create?” There are basically two types of Angular forms (login) and its validations.
ü Template Driven form
ü Model driven forms
ü Stayed Informed – Angular 5 and Angular 4 documentation and example
And In this section, I will discuss about Model driven form.
Steps 1 - In the NgModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Steps 2 - Create login form
form [formGroup]="logedInForm" (ngSubmit) = "mdfLogin(logedInForm.value)" >
//login UI
form>
form>
Steps 3 - Initialize FormGroup and FormControl in ngOnInit method
ngOnInit() {
this.date = new Date(); // Today date and time
this.logedInForm = new FormGroup({
Validators.required,
Validators.pattern("[^ @]*@[^ @]*")
])),
password: new FormControl('Password!123', [
Validators.minLength(8),
Validators.required])
})
}
Steps 4 – Create login method to preform login actions
// Model Driven Form - login
mdfLogin(data) {
this.emailId = data.emailId;
this.password = data.password;
alert(JSON.stringify(data));
}
And
form [formGroup]="logedInForm" (ngSubmit) = "mdfLogin(logedInForm.value)" >
div>
input type="text" class="textbox" name="emailId" placeholder="Email" formControlName="emailId">
div>
div>
input type="password" class="textbox" name="password" placeholder="password" formControlName="password">
div>
div>
input type="submit" class="button default-button" value="LogIn" [disabled] = "!logedInForm.valid">
div>
form>
The Result looks like –
The Video URLs –
I hope you are enjoying with this post! Please share with you friends. Thank you!!
