Angular 2 将表单分配给变量不起作用#f="form" (submit)="onSubmit(f.value)"
Posted
技术标签:
【中文标题】Angular 2 将表单分配给变量不起作用#f="form" (submit)="onSubmit(f.value)"【英文标题】:Angular 2 assigning form to variable not working #f="form" (submit)="onSubmit(f.value)" 【发布时间】:2016-03-11 08:13:27 【问题描述】:我只是在学习流星 Angular 2 教程。在step 4 中,使用哈希 f 等于表单的 angular 2 表单绑定用于将表单绑定到变量 f,然后绑定 onSubmit 函数。两者都不为我工作。 Angular 2 API 有变化吗?
html 无效:
<form #f="form" (submit)="addParty(f.value)">
<div>f.value</div>
</form>
示例中party-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");
我复制了流星 angular 2 示例,请参阅那里的确切代码。 ng-book 等其他示例也将其用作 onSubmit 函数
#f="form" (submit)="onSubmit(f.value)"
【问题讨论】:
问题是缓存问题。通过教程,第一个版本是缓存。不确定,但我认为meteor应该自动进行缓存破坏,但是我需要手动删除缓存才能使其正常运行。 您可以回答自己的问题并接受它(经过一段时间的冷却时间),然后它就不会像未回答一样保持打开状态。 【参考方案1】:问题是缓存问题。通过教程,第一个版本是缓存。不确定,但我认为meteor应该自动进行缓存破坏,但是我需要手动删除缓存才能使其正常运行。
【讨论】:
以上是关于Angular 2 将表单分配给变量不起作用#f="form" (submit)="onSubmit(f.value)"的主要内容,如果未能解决你的问题,请参考以下文章
将字符串值分配给来自AsyncTask的onPostExecute方法的活动字符串变量不起作用