Angular Model-Driven Form Using VS Code And Node.js

In a model-driven approach, the model-driven form which is created in the .ts file is responsible for handling all the user interactions/validations. First, we need to create a model using Angular in-built classes like form group and form controls and then we need to bind a model in the HTML form.

Model-driven forms are more powerful and flexible.

These are some things that we can't do with template-driven forms, but with the model-driven form, we can perform those things. If we want to detect if any changes are occurring in any variable we can do that with model-driven form. We can easily use two-way data binding in model-driven forms.

Reactive form in angular technique to manage your form in a reactive manner it means that you can manage your form and validation in our component.

These forms are the best option when we need a complex form.

It is easy to implement like using a model in control, with forms controls. These forms are called model-driven forms because of the model act as a mediator between the component and template. we need to import ReactiveFormsModule in our appModule.ts file.

In the .ts file, we need to import 3 more libraries (FormGroup, FormBuilder, and FormControl ).

• FormControl:- it tracks the value of the controls and validates the invalid controls in the form. in the reactive form, we need to initialize FormControl object to use the functionality in our components, which engaged with Html component
• FormGroup:- Tracks the validity and the state of the group of form control instance or moreover, we can say the FormGroup to be a collection of FormControls.
• FormBuilder:- this helps us to the forms along with their initial value and their validations.

There are few features of reactive form,

1. More flexible
2. no data binding is done
3. More Component code and less Html markup
4. reactive transformation is possible such as
1. Handling an event based on debounce time
2. handling event when the components are distinct until changed
3. adding element dynamically
5. Handles any complex scenarios
6. Easler unit testing

The most important part of any form is to add the validations in the application. when we do the fname: new FormControl(), the first arguments in the FormControl is the initial value and the second value is the validation that we can add there.

validations are performed their works the same with both type form(template-driven form and model-driven form).

reactivecomponent.css

reactivecomponent.html