Reactive Forms in Angular

<form #form="ngForm" (ngSubmit)="addUser(form.value)">
<img class="spinner" *ngIf="usernameRef.pending">
<input type="text"
name="username"
[ngModel]
#usernameRef="ngModel"
required
UsernameAsyncValidator
>
<button [disabled]="form.invalid || form.pending">Add User</button>
</form>
A comparison between reactive and template driven forms
  1. Template-Driven forms are Asynchronous because of ngForm and ngModel, these directives take more than one cycle to build the entire control tree. That means you must wait for a tick before manipulating any of the controls from within the component class;
  2. Custom validators in Template-Driven forms need more work;
  3. As our template grows it becomes harder to understand the form structure and readability, so Reactive forms are more scalable than Template-Driven forms;
  4. Although Template-Driven forms are easier to create, they become a challenge when you want to do unit testing, because testing requires the presence of a DOM;
  5. Reactive forms are built with immutable data while Template-Driven forms promote the use of bidirectional binding (avoid the evil!).

Reactive Forms

A Control Form with the property valueChanges
import { Component, OnInit } from \'@angular/core\';
import { FormControl } from \'@angular/forms\';

@Component({
selector: \'app-login-form\',
template: `
<input type="text" [formControl]="name">
`
)
export class LoginComponent implements OnInit {
name = new FormControl(\'name\');
ngOnInit() {
this.name.valueChanges.subscribe(data => console.log(data));
}
}
Template Driven Form with ngModel Directive
Using Viewchild decorator to access an element
import { Component, OnInit } from \'@angular/core\';
import { FormControl, FormBuilder, FormGroup } from \'@angular/forms\';

@Component({
selector: \'app-login-form\',
template: `
<form [formGroup]="loginForm" (ngSubmit)="submit()">
<input type="text" [formControl]="username">

<button [disabled]="loginForm.invalid">Login</button>
</form>
`
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
username = new FormControl(\'username\');
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: this.username
});
this.loginForm.valueChanges.subscribe(data => console.log(data));
}

submit() {
console.log(this.loginForm.value);
}
}

Custom Validator

  1. form.get(‘company’)
  2. form.controls[‘company’]
  3. form.controls.company

Nested Form

Reactive Forms
import { Component, OnInit } from \'@angular/core\';
import { FormBuilder, FormGroup, Validators } from \'@angular/forms\';

@Component({
selector: \'app-login-form\',
template: `
<form [formGroup]="loginForm" (ngSubmit)="submit()">
<input type="text" formControlName="username">

<input type="password" formControlName="password">
<button [disabled]="loginForm.invalid">Login</button>
</form>
`
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: [\'\', [Validators.required, Validators.minLength(2)]],
password: [\'\', [Validators.required, Validators.minLength(4)]],
});
this.loginForm.valueChanges.subscribe(data => console.log(data));
}

submit() {
console.log(this.loginForm.value);
}
}
import { Component, OnInit } from \'@angular/core\';
import { FormControl, FormBuilder, FormGroup, Validators } from \'@angular/forms\';

@Component({
selector: \'app-login-form\',
template: `
<form [formGroup]="form" (ngSubmit)="send()">
<input type="text" formControlName="username">
<div formGroupName="carInfo">

<input type="text" formControlName="model">
<input type="number" formControlName="kw">
</div>
<i class="fa fa-check" *ngIf="form.get(\'carInfo\').valid && form.valid"></i>
<button [disabled]="form.invalid">Login</button>
</form>
`
})
export class LoginComponent implements OnInit {
form: FormGroup;

constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.form = this.formBuilder.group({
username: [\'\', Validators.required],
carInfo: this.formBuilder.group({
model: [\'\', Validators.required],
kw: [\'\', Validators.required],
})
});
this.form.valueChanges.subscribe(data => console.log(data));
}

send() {
console.log(this.form.value);
}
}
Using Viewchild decorator to access an element

Dynamic Forms

--

--

--

We help tech communities to grow worldwide, providing top-notch tools and unparalleled networking opportunities.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

[angular] template projection on angular(ng-content vs ng-container)

How I managed to install a working IntelliJ Idea CE on an ARM Chromebook

Tips for using Next.js for your next web app

Server Side Events (SSE)

Building a TwitchPlays Game

My first 5 Elixir d’ohs

Arrow Functions in JavaScript

JavaScript Made Easy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Codemotion

Codemotion

We help tech communities to grow worldwide, providing top-notch tools and unparalleled networking opportunities.

More from Medium

React vs. Angular: Which JS Framework Should You Choose?

React vs Angular: who wins?

Swagger UI + Angular & ReactJS + Customization

Angular vs React: The Complete Comprehensive Comparison