What are the differences between template-driven forms and reactive forms in angular 2

Question

In angular 2, what is the difference between template driven forms and react form. In what situations do we need to use template forms and reactive forms

Answer 1

As you can see from the question , the Template-driven form is something when we write logic, check, control everything in the part of the template that I have in mind in the html code. The template is responsible for customizing the form, validation, etc.

Whereas in the case of Reactive forms, the entire part of the logical check on the controller side means in the typescript file / class. For a reactive approach, you do all this in code in a component. Less noisy approach

Driven Forms Template Features

• Easier to use
• Suitable for simple scenarios.
• Uses two-way data binding (using the syntax [(NgModel)]
• Minimum Component Code
• Automatic tracking of the form and its data (processed by Angular)
• Unit Testing - Challenge

Features of reactive forms

• Simple unit testing
• More flexible, so it handles any complex scripts.
• Active conversions are possible, such as adding elements dynamically
• Data binding is not performed (an unchanged data model is preferable to most developers)
• More component code and less HTML markup

Answer 2

When using a template-based approach, you mainly use directives, such as ngModel, in your template. Based on these directives, Angular will create formcontrol objects. This approach is good for creating simple forms with basic validation (required, minlength, maxlength, ...).

With a reactive approach, you basically need to create new instances of formcontrols and formcontrolgroups in your component. Reactive forms are also the best choice for creating more complex forms and are better if you intend to implement unit testing for your forms.

Place an order on the following topic ...

http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Angular2 Forms API, Template Managed or Reactive?

Answer 3

A detailed answer to a similar question can be found here: what are the practical differences between the template and reactive forms?

this is what Aravind published, which is abstract and direct to the point. so I copy and paste the whole comparison:

Template Form Features

• Easy to use
• Suitable for simple scenarios and not suitable for complex scenarios
• Similar to AngularJS
• Two-way data binding (using the syntax [(NgModel)])
• Minimum component
• Automatic tracking of the form and its data (processed by Angular)
• Unit testing is another problem.

Reactive forms

• More flexible but requires a lot of practice.

• Handles any complex scenario

• Data binding is not performed (immutable data model is preferred by most developers).

• More component code and less HTML markup

• Jet conversions can be made possible, such as

  • Event handling based on rollback time

  • Handling events when components are different until changed

  • Adding items dynamically

• Simpler unit testing

Near pros and cons

Answer 4

We can just say

Reactive form can be used in the following situations

• Complex forms with a large number of fields.
• Multiple complex validation is. User Checks Required
• Require that a JSON structure be sent with values ​​in the form.

We can get the whole form in a structured way using "form.value"

If we have 4 fields Name, Surname, Email, Phone number in reactive form.

HTML code will be

<form [formGroup]="form"> First Name <input formControlName="firstName"> Last Name <input formControlName="lastName"> Email <input formControlName="email"> Phone Number <input formControlName="phoneNumber"> </form> 

We can get the values ​​from the form as shown below

 { "firstName": "FName", "lastName": "LName", "email": " [e-mail] ", "phoneNumber": "123" } 

calling form.value, where form is the FormGroup variable we created.

Template-based form : Can be used with simple forms. Like the login page. With two way data binding. We can simply assign a value to a variable from the user interface and vice versa.

A simple example: if we provide two-way binding for input below.

 <input [(ngModel)]="username"> 

We can simply display the value that the user gives in the user interface.

 <p>Hello {{username}}!</p>