How to know if a form is Reactive form or Template Driven Form

Question

I have joined a new project and got the code to local. I just started using Angular.

The application is using Angular version 6. I am not sure which type forms are being used.

Is there any way I can find out?

In the following the examples, I thought 1st example was using Reactive forms because of "FormGroup" (Please correct me if I am wrong), and I am not sure about 2nd example.

Html File 1:

<form [formGroup]="loginForm" (ngSubmit)="Login(loginForm.value)" name="login-form" class="form">
    <div></div>
</form>

ts file 1:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';


public ngOnInit() {
this.getInitData();
this.loginForm = this.formBuilder.group({
  'username': [null, Validators.required],
  'password': [null, Validators.required],
  'rememberMe': false
});

Html File 2:

<form id="aForm" target="_blank" action="{{Url}}" method="post" #aForm>
   <input type="submit" (click)="aForm.submit()" value="submit" /> 
</form>

ts file 2:

Not mentioned anything about forms.

angular.io/guide/reactive-forms

R. Richards
– R. Richards

2019-04-27 23:51:38 +00:00
Commented Apr 27, 2019 at 23:51 — R. Richards
– R. Richards, Commented Apr 27, 2019 at 23:51
angular.io/guide/forms#template-driven-forms

Ian Preglo
– Ian Preglo

2019-04-28 00:17:11 +00:00
Commented Apr 28, 2019 at 0:17 — Ian Preglo
– Ian Preglo, Commented Apr 28, 2019 at 0:17

Francisco Santorelli · Accepted Answer · 2019-04-28 00:16:43Z

4

Template driven Forms are in the Template, and Reactive Forms use the classes from Reactive Forms, that's the AbstractControl group.

A good way to look at it is: If you see [(ngModel)] in the Template, it's template driven. If you see formControls formGroups and formArrays, it is reactive.

In your case, the use of formBuilder means it is reactive

answered Apr 28, 2019 at 0:16

Francisco Santorelli

1,3589 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Techno Over a year ago

Thank you for your clarification. I added 2 examples, in 2nd one there is no ngmodel or formgroup, what category it come under?

Francisco Santorelli Over a year ago

in your second example the form is being given a variable value #aForm directly in the HTML and then accessed with 'aForm.value', that's templateDriven but really simple. If you need more logic in it then you have to mutate it into a ReactiveForm, by creating its formControl in the component and then binding it

Collectives™ on Stack Overflow

How to know if a form is Reactive form or Template Driven Form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related