Angular 6 Reactive Forms

 

Angular 6 provides a plethora of tools and builders to assist in the creation of forms, and it can be a little intimidating for beginners to get the hang of.

Reactive forms are model-driven forms which primarily use Observable’s to synchronously update the values inputted. The streams allow the data to be accessed immediately while being immutable. Let’s start by working through an example of creating a form for storing a User.

Lets begin with the typescript side of things, and create the form model. FormGroups allow you to link together multiple input fields, as well as other groups. FormBuilder is just like the name suggests, it is a tool to assist in building forms.

Lets create our form model in the ngOnInit method, and add some validators.


ngOnInit(){
    this.myForm = this.fb.group({
        name: ['', [Validators.required]],
        email: ['', [Validators.required]],
        age: '',
        height: '',
    });
}

Switching gears to the html, lets create the form and bind it to our FormGroup.


<form [formGroup]="myForm">
<div>
    <label>Name: </label>
    <input type="text" formControlName="name">
</div>
<div>
    <label>Email: </label>
    <input type="text" formControlName="email">
</div>
<div>
    <label>Age: </label>
    <input type="number" formControlName="age">
</div>
<div>
    <label>Height: </label>
    <input type="text" formControlName="height">
</div>
<div>
    <button type="submit" >Submit</button>
</div>
</form>

The formControlName attribute is crucial to the FormGroup, and allows us to link fields to our data. The basic form is created,  so let’s add in some field validators. To do this, we will make use of the ngIf directive and check to see if the input passes the validator’s requirements. Furthermore, we will check if the input has been “touched” before throwing an error.


<form [formGroup]="myForm">
<div>
    <label>Name: </label>
    <input type="text" formControlName="name">
    <div style="color:red"*ngIf="myForm.controls.name.errors?.required && myForm.controls.name.touched">Name cannot be empty.</div>
</div>
<div>
    <label>Email: </label>
    <input type="text" formControlName="email">
    <div style="color:red"*ngIf="myForm.controls.email.errors?.required && myForm.controls.email.touched">Email cannot be empty.</div>
</div>
<div>
    <label>Age: </label>
    <input type="number" formControlName="age">
</div>
<div>
    <label>Height: </label>
    <input type="text" formControlName="height">
</div>
<div>
    <button type="submit" >Submit</button>
</div>
</form>

There are numerous preexisting Validators which come with Angular, but you can also create your own custom ones using regex!

Another excellent use of the validators would be to disable the submit button until all the fields are valid. Lucky for us, this requires almost no code at all.

<div>
    <button type="submit" [disabled]="myForm.invalid" >Submit</button>
</div>

Although it can be intimidating at first, Angular’s Form module provides an excellent tool-set which makes creating reactive forms a breeze.

Leave a Reply

Your email address will not be published. Required fields are marked *