Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Angular Basics Angular Basic Forms Resetting the Form

What's the différence between the ngForm(from #commentForm) and NgForm from class import ?

In the entry-comment-form.component.html we put #commentForm: ngForm but in the component.ts we use NgForm, what is this "ngForm" (without uppercase) ?

1 Answer

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

The difference is one is the class that you are importing (NgForm). This basically gives you access to the NgForm directive. Now NgForm itself is a directive, so even though we have imported it, we still need a way to gain access to the methods, variables, etc, that it provides. This is where the ngForm comes in. This basically provides your form with access to the method and variables found within the NgForm directive.

Directly from the Angular Documentation:

You optionally export the directive into a local template variable using ngForm as the key (ex: #myForm="ngForm"). This is optional, but useful. Many properties from the underlying FormGroup instance are duplicated on the directive itself, so a reference to it gives you access to the aggregate value and validity status of the form, as well as user interaction properties like dirty and touched.