What is Angular NgForm
It's simply a directive exported from FormsModule which gets automatically added to all <form> tags in your Angular templates once you import the module.
Behind the curtains, the ngForm directive creates a top-level FormGroup instance and binds it to your <form> tag to enable you to work with the form. For example to access the aggregate form value or check validation status.
How to Access Angular NgForm Using Template Reference Variables
Since the ngForm directive is implicitly added in your <form> tag when you import its parent module (FormsModule) in your application, you don't need to do any configuration to start working with template-based forms.
You can simply get a reference to your form' ngForm directive by exporting it into a local template variable and by using the ngForm directive as the value of the variable (#myForm=ngForm).
Using Angular ngNoForm
If you you want to import FormsModule in your application but want to skip a specific form, you can use the ngNoForm directive which will prevent ngForm from being added to the form.What is an Angular Template Reference Variable
A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.
You can simply use the hash symbol (#) to create a reference variable in your template which will be only available in that template.
In case you want to reference a directive like ngForm instead of the DOM element where the variable was declared, you simply need to set the value of the variable explicitly to the directive i.e #myForm="ngForm".
Using the myform variable, you can access many useful properties of ngForm either in your template or in your component:
myform.value: It will provides you with the aggregated form value of all the fields used in your <form> tag,
myform.valid: It will provides you with a boolean value indicating if the form is valid or not,
myform.touched: It will provides you with a boolean value indicating if the user has entered value at least in one field,
myform.submitted: It will provides with a boolean value indicating if the form was submitted.
Comments
Post a Comment