Angular 2将表单分配给不起作用的变量#f =“form”(submit)=“onSubmit(f.value)”

我只是通过流星角2教程.在 step 4中,使用散列f等于形式的角度2形式绑定用于将形式绑定到变量f,然后用于绑定onSubmit函数.两者都不适合我. Angular 2 API是否已更改?

不工作的HTML:

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

来自示例的parties-form.html的原始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组件party-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");

我复制了流星角2样本,看那里的确切代码.像ng-book这样的其他样本也使用它作为onSubmit功能

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

解决方法

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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...