Angular 2 将表格分配给变量不起作用#f="form"（提交）="onSubmit(f.value)"

Question

我正在阅读流星 angular 2 教程。在 step 4 中，angular 2 表单与散列 f 的绑定等于表单用于将表单绑定到变量 f，然后绑定 onSubmit 函数。两者都不适合我。 Angular 2 API 改变了吗？

不工作HTML:

<form #f="form" (submit)="addParty(f.value)">
  <div>{{f.value}}</div>
</form>

派对的原始 HTML 代码-form.html 来自示例：

<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>

和 JS 组件方-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");

我复制了 meteor angular 2 个示例，具体代码请看那里。 ng-book 等其他示例也将其用作 onSubmit 函数

#f="form" (submit)="onSubmit(f.value)"

Answer 1

问题是缓存问题。通过本教程，第一个版本是缓存。不确定，但我认为 meteor 应该自动清除缓存，但我需要手动删除缓存才能使其正常运行。

Angular 2 将表格分配给变量不起作用#f="form"（提交）="onSubmit(f.value)"

Angular 2 assigning form to variable not working #f="form" (submit)="onSubmit(f.value)"

meteor

angular2-forms

angular2-directives

angular