How to bind ngFormModel in angular2 using Dart

Question

The form is displayed (the form is displayed)

.html

<form (ngSubmit) = "onSubmit()" #nameForm = "ngForm"> {{diagnostic}} <div class = "mdl-card mdl-shadow--3dp layout horizontal wrap"> <div class = "mdl-card__title"> <h2 class = "mdl-card__title-text">Name</h2> </div> <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input required type = "text" [(ngModel)] = "name.first" ngControl = "first" #first = "ngForm" (input)="onInputHandler($event)" class = "mdl-textfield__input ng-valid" id = "first"> <label class = "mdl-textfield__label" for = "first">First</label> <span [hidden] = "isFirstValid" class = "mdl-textfield__error">{{firstErrorMsg}}</span> </div> <div class = "mdl-card__actions mdl-card--border"> <button id = "startButton" class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect" >Submit </button> <br> <button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Button All </button> </form> 

Trying to follow the Form example and validating in Angular 2.0 ,

I cannot get the interface to display by changing the first line of the form to

 <form (ngSubmit) = "onSubmit()" [ngFormModel]="form" #f="form"> {{diagnostic}} .. 

With the change, the browser simply does not display anything, as if it could not parse the markup - the error is actually displayed in pub-serve or debug mode.

 Transform TemplateCompiler on epimss_ng2_reg|lib/components/name_component.ng_meta.json threw error: Template parse errors: There is no directive with "exportAs" set to "form" (" <div [hidden] = "isSubmitted"> <form (ngSubmit) = "onSubmit()" [ng-form-model]="form" [ERROR ->]#f="form"> {{diagnostic}} <div class = "mdl-card mdl-shadow--3dp layout horizontal wrap"> "): NameComponent@12 :31 .... 

Why is this not working?

Answer 1

This seems to have been changed since the blog post was created. NgForm now exported as NgForm instead of form .

 [ngFormModel]="form" #f="ngForm"> 

This is correct on the GitHub source , but not on the blog.

Complete component as per Dart blog example

 @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); } }