How to bind ngFormModel in angular2 using Dart?
Seems this was changed since when the blog post was created.NgForm
is now exported as ngForm
instead of form
.
[ngFormModel]="form" #f="ngForm">
It's correct in the GitHub source but not in the blog post.
Full component according to the example in the blog post in Dart
@Component(selector: 'form-element')@View(template: '''<h1>form-element</h1><form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm"> <div> <div class="formHeading">First Name</div> <input type="text" id="firstName" ngControl="firstName"> <div class="errorMessage" *ngIf="f.form.controls['firstName'].touched && !f.form.controls['firstName'].valid">First Name is required</div> </div> <div> <div class="formHeading">Street Address</div> <input type="text" id="firstName" ngControl="streetAddress"> <div class="errorMessage" *ngIf="f.form.controls['streetAddress'].touched && !f.form.controls['streetAddress'].valid">Street Address is required</div> </div> <div> <div class="formHeading">Zip Code</div> <input type="text" id="zip" ngControl="zip"> <div class="errorMessage" *ngIf="f.form.controls['zip'].touched && !f.form.controls['zip'].valid">Zip code has to be 5 digits long</div> </div> <div> <div class="formHeading">Address Type</div> <select id="type" ngControl="type"> <option [value]="'home'">Home Address</option> <option [value]="'billing'">Billing Address</option> </select> </div> <button type="submit" [disabled]="!f.form.valid">Save</button> <div> <div>The form contains the following values</div> <div> {{payLoad}} </div> </div></form>''')class FormElement { ControlGroup form; String payLoad; FormElement(FormBuilder fb) { form = fb.group({ "firstName": ['', Validators.required], "streetAddress": ['', Validators.required], "zip": [ '', Validators.compose([ZipValidator.validate]) ], "type": ['home'] }); } void onSubmit() { payLoad = JSON.encode(this.form.value); }}