Angular has two distinct way of handling form one is the template driven way and the other is the reactive form .In this post I am going to show you how is easy it is to get started with reactive form by creating a simple Username and password signup page .
Step 1:
Import the reactive form module which is ReactiveFormsModule from
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
This gives you access to all the classes required to create a reactive form in your module.
step 2:
Create a login component by using this command on your terminal.
ng g c @component/logging
step 3:
import the following
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
Create a variable of type FormGroup
form: FormGroup;
step 4:
Configure your formGroup to accept both the username and password and set validation rules on them. Using the the validation required it shows that the field is required .
ngOnInit() {
this.form = this.fb.group({
username: ['', [Validators.required]],
password: ['', [Validators.required]]
});
}
step 5:
I love creating this two special functions they show the error validation line around the input field and also scroll to the position where the error was first found this is very useful in long forms.
scrollTo(el: any): void {
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "center" });
}
}
scrollToError(): void {
const firstElementWithError = document.querySelector(
".ng-invalid[formControlName]"
);
this.scrollTo(firstElementWithError);
}
step 6:
Finally my validation functions which check if all fields where correctly inputted before making an api call.
validate() {
this.submitted = true;
if (this.form.invalid) {
this.scrollToError();
} else {
this.submitted = false;
//make Api call
}
}
```
###step 7:
It is time to access all the logic we have written in our login.html file.
The code below calls the formGroup in the form tag.
```
get L(){
return this.form.controls;
}
```
L is a getter that gives us access to the formcontrol. This has information about the formGroup. Ranging from if a form has an error or if it passed validation .
```
<form [formGroup]="form">
<div class="body">
<div class="row">
<div class="form-group col-6">
<label for="form34">Menu Name</label>
<input formControlName="username" type="text" id="form34" class="form-control"
[ngClass]="{ 'is-invalid': submitted && L.username.errors }">
<div *ngIf="submitted && L.username.errors" class="invalid-feedback mb-1">
<div *ngIf=" L.username.errors.required">
Please provide a username. </div>
</div>
</div>
<div class="form-group col-6">
<label for="form34">Menu URL</label>
<input formControlName="password" type="text" id="form34" class="form-control"
[ngClass]="{ 'is-invalid': submitted && L.password.errors }">
<div *ngIf="submitted && L.password.errors" class="invalid-feedback mb-1">
<div *ngIf=" L.MenuURL.password.required">
Please provide a password. </div>
</div>
</div>
</div>
<div class='footer'>
<div class="row">
<div class="col-6">
<div class="float">
<button class="btn btn-primary" type="button" (click)="validate()">
<span *ngIf="!loading">Create</span>
<div *ngIf="loading" class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
</button>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</form>
```
### Complete code:
```
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit { {
submitted: boolean;
loading: boolean = false;
employee: any;
form: FormGroup;
constructor( public fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
Email: ['', [Validators.required]],
Password: ['', [Validators.required]]
});
}
scrollTo(el: any): void {
if (el) {
el.scrollIntoView({ behavior: "smooth", block: "center" });
}
}
scrollToError(): void {
const firstElementWithError = document.querySelector(
".ng-invalid[formControlName]"
);
this.scrollTo(firstElementWithError);
}
validate() {
this.submitted = true;
if (this.form.invalid) {
this.scrollToError();
} else {
this.submitted = false;
//make Api call
}
}
}
```
Thanks for reading
Top comments (0)