of the form controls. It takes the existing formGroup instance and matches it with an HTML element. • The Form Control tracks values and states of input elements. • Instances of this building block create the form model
retains form states such as dirty, valid, invalid, etc. • It is different from the data model. • It is the same for template-driven and reactive forms but created differently. • For template-driven forms, Angular generates the form model • For reactive forms, Angular does not generate the form model rather it is generated from instances of the FormGroup and FormControl.
heavy on the template with html and data-binding. • Uses two way data-binding with the [(ngModel)] syntax to keep user entry and data model property in sync. • Suitable for simple scenarios • Angular generates Form Model by creating the instances FormGroup and FormControl
use • No need to write code to copy data into the input elements. Angular automatically generates them. • Angular Automatically tracks the form and its data • Minimal component code
flexibility of creating form controls, Angular directives generates those controls based on information in the data-binding. • Adding more & more validators to the input tag eventually makes it unreadable • Template-driven forms are asynchronous and hence makes unit testing a little more complicated.
• Specify a property for the root formGroup • Create an instance of the FormGroup • Update AngularModule by adding ReactiveFormsModule to the imports array and declarations • Bind the form to the formGroup and the input elements to the associated formControl using the reactive form directives.
in two ways: • Form Model Heirarchy E.g To access if the firstname input element is valid: CustomerForm.controls.firstName.valid • Referencing the form control using the Form Group’s get method. CustomerForm.get(‘firstName’).valid
get bigger and we have multiple form groups. It reduces repetition and clutter by handling control creation. • Import the FormBuilder, we can take off the FormControl import. • Inject the FormBuilder in the constructor. • Use the FormBuilder instance to create the formGroup.
scale apps which do not necessarily require control of the forms by the user. Reactive forms are very useful in more complex scenarios and large scale apps because there is flexibility on the form model and form building blocks and unit testing can easily be done.