Reactive Forms in Angular 2
Posted By : Manisha Kirodiwal | 19-Nov-2017
Model-based forms/ Reactive forms allow us to test our forms without having to depend on end-to-end testing.
FormGroup and FormControl:
Let's start with a registration form example: Now to make form a model driven form, we need to create a form model which represents the DOM structure in the component. We can use the low-level Apis for FormGroup and FormControl.
FormGroup = A set of FormControls
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
...
})
export class AppComponent {
registerForm = new FormGroup({
firstname: new FormControl(),
lastname: new FormControl(),
address: new FormGroup({
street: new FormControl(),
zip: new FormControl(),
city: new FormControl()
})
});
}
Here we have created a component registerForm that represents FormGroup. For each field in the form, we have created a FormControl. FormGroup can be nested, as the address is a collection of form controls.
Binding forms using formGroup, formGroupName, and
We will use formGroup directive to associate the model with our form. This directive takes an expression that evaluates to an instance of FormGroup.
First import ReactiveFormModule for
import { NgModule } from '@angular/core';
import { BrowserModule } from '@anglar/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, ReactiveFormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
Use formGroup to bind the model with the form template.
Each form control obtains an applied
FormBuilder:
FormBuilder is high-level API which we can use to make our code more pleasant. It's like a factory which creates
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
...
})
export class AppComponent implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstname: '',
lastname: '',
address: this.formBuilder.group({
street: '',
zip: '',
city: ''
})
});
}
}
Forms with a single control:
Here we can listen reactively for all the changes that are happening to the control.We can subscribe to
@Component()
export class SearchComponent implements OnInit {
searchControl = new FormControl();
ngOnInit() {
this.searchControl.valueChanges.subscribe(value => {
// do something with value here
});
}
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Manisha Kirodiwal
Manisha is a Web Application developer and she is good in working with Angular, TypeScript , JavaScript and Jquery. In free time she loves to dance and cooking.