Given the following...
<form (ngSubmit) = "onSubmit()"
#heroForm = "ngForm">
{{diagnostic}}
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text"
class = "form-control"
required
[(ngModel)] = "model.name"
ngControl = "name"
#name = "ngForm"
#spy>
<p *ngIf = "name.dirty"
class = "alert alert-danger">
Name is required
</p>
<!--<p [hidden] = "name.dirty"-->
<!--class = "alert alert-danger">-->
<!--Name is required-->
<!--</p>-->
</div>
..
..is it possible to get the #name = "ngForm"
(ngForm) reference in the .dart component to allow manipulation? Any suggestion and correction is welcome.
To get started using template reference variables, simply create a new Angular component or visit an existing one. To create a template reference variable, locate the HTML element that you want to reference and then tag it like so: #myVarName .
The NgModel is used in form fields and can be exported in local template variable to get its values and validation status in HTML template. When we create HTML form, we have to use name attribute in form fields. In the context of NgForm , the role of NgModel is to register the form field with form using name attribute.
import this -
import {ViewChild} from 'angular2/core';
Just add this field with the annotation to the class
// Dart syntax
@ViewChild('heroForm') NgForm heroForm;
You can't use it in the constructor though because it is only set later. In ngAfterViewInit
or event handlers for user input you can use it without limitations.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With