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

Posted 2023-02-22

【中文标题】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应该自动进行缓存破坏，但是我需要手动删除缓存才能使其正常运行。