Differences between ngForm and FormControl

Question

I'm working with forms on Angular 4 and I don't recognize what is the differences using NgForm and FormGroup handling errors and inputs validators. Is there any big differences handling forms?

Answer 1

If I am reading this right, you are bumping up against the difference between Template Driven Forms and Reactive Forms.

Template Driven Forms are as it sounds; Template Driven. Most if not all of the logic lies in the template. Template driven forms are great for simple forms that don't involve a lot of complicated logic. Template Driven Forms

Reactive Forms take a different approach by defining the form logic within the model. Reactive Forms are typically a little bit more advanced and allow quite a bit of customization in terms of functionality and flexibility.Reactive Forms

Answer 2

My comment is very general. For more details, check Reactive From vs Template Driven Form. It is also a question of strategy, synchronicity, tests needs and good practice (check here for example: https://www.pluralsight.com/guides/difference-between-template-driven-and-reactive-forms-angular/)

ngForm = Template-Driven = asynchronous = more hard to test = control INSIDE your template = kind of the old way of coding = has a FormGroup type key inside it (the 'form' key).

FormGroup = Reactive Form = synchronous = controls INSIDE your code and BIND to the template: because of that is more easy to test = more modern way of coding = is an object of FormGroup type directly.

In general they do the same, but using ngForm inside your template directly you are using the strategy Template-Driven. In this case, the element result is an Object that HAS a key of the type FormGroup (key 'form)'. Then ngForm HAS a FormGroup inside. The control IS in your template. To access that for another place, you need to access the element of the DOM or pass the element using an event. By other hand, using a variable = FormGroup in your JS/TS and bind that variable in your template, you are using the Reactive Form strategy. In this case, the variable IS an object of type FormGroup directly. The control IS NOT inside your template, but bind to it. Then is more easy to access from another place

Well, if ngForm HAS a FormGroup inside then we could tell ngForm is more complete? Not exactly. Is just different ways of have the same result. Template-Driven keeps your values on the template and you will need to manipulate it inside the template directly or have a little more job to to manipulate it in your TS, using events for example (example of that is how to create a custom validation in your form using Template Driven vs Reactive Form). Instead, FormGroup will give you all access from the TS directly and you can control it before going to the template, or access it from another code without have to get the value from the DOM (.getElementById ....).

Then in my opinion this is a question about your needs, your strategy and the good practice you are adopting. But basically they was create to gives you the same result.