Angular Library - Angular Forms

Forms are one of the one of the most frequently used features in web applications. The angular form provides various functions such as validation. There are two major forms of the angular form, ‘reactive’ and ‘template-driven’.

Differences

Reactive form directly creates a form object that allows the necessary setups in the .ts file and uses this from the template file using binding. This provides scalability and security. On the other hand, template-driven creating the form object and setup from the template and improves the readability but reduces the scalability

	reactive	template-driven
Setup of the form model	Explicit, created in the component class	Implicit, created by directives
Data model	Structured and immutable	Unstructured and mutable
Data flow	Synchronous	Asynchronous
Form validation	Functions	Directives

How to Use

• reactive form
• template-driven form

Both methods can track the status of the form and get the value from the form. They both work on the foundation of classes below

FormControl: Individual fields

Angular

FormGroup: Group of fields

 

Angular

FormArray: Array of similar form controls

 

Angular

ControlValueAccessor: Link between a form control and the DOM element

 

Angular

---

References

Angular