I'm just going through the meteor angular 2 tutorial. In step 4 the angular 2 form binding with hash f equals form is used to bind the form to the variable f and secondly binding the onSubmit function. Neither is working for me. Has the Angular 2 API changed?
Not working HTML:
<form #f="form" (submit)="addParty(f.value)">
<div>{{f.value}}</div>
</form>
Original HTML code for parties-form.html from the sample:
<form [ng-form-model]="partiesForm" #f="form" (submit)="addParty(f.value)">
<label>Name</label>
<input type="text" ng-control="name">
<label>Description</label>
<input type="text" ng-control="description">
<label>Location</label>
<input type="text" ng-control="location">
<button>Add</button>
<div>{{f}}</div>
<div>{{f.value}}</div>
</form>
And the JS Component parties-form.ts:
/// <reference path="../../typings/angular2-meteor.d.ts" />
import {Component, View} from 'angular2/angular2';
import {FORM_DIRECTIVES, FormBuilder, Control, ControlGroup, Validators} from 'angular2/angular2';
import {Parties} from 'collections/parties';
@Component({
selector: 'parties-form'
})
@View({
templateUrl: 'client/parties-form/parties-form.html',
directives: [FORM_DIRECTIVES]
})
export class PartiesForm {
partiesForm: ControlGroup;
constructor() {
var fb = new FormBuilder();
this.partiesForm = fb.group({
name: ['', Validators.required],
description: [''],
location: ['', Validators.required]
});
// Test
console.log(this.partiesForm.value);
}
addParty(party) {
console.log("assParty", party);
return true;
if (this.partiesForm.valid) {
Parties.insert({
name: party.name,
description: party.description,
location: party.location
});
(<Control>this.partiesForm.controls['name']).updateValue('');
(<Control>this.partiesForm.controls['description']).updateValue('');
(<Control>this.partiesForm.controls['location']).updateValue('');
}
}
}
console.log("PartiesForm loaded");
I copied the meteor angular 2 sample, see exact code there. Other samples like ng-book use it too as onSubmit function
#f="form" (submit)="onSubmit(f.value)"