Angular2 New Form API：提交表单而不绑定其元素答案

【问题标题】：Angular2 New Form API: Submitting form without any bindings of its elementsAngular2 New Form API：提交表单而不绑定其元素
【发布时间】：2025-11-26 17:55:02
【问题描述】：

注意：它应该与the new forms API!一起使用

是否可以提交没有任何元素绑定的原始表单？

一个例子：

<div class="form-mantle">
    <form (ngSubmit)="onSubmitForm1(f1.value)" #f1="ngForm">
        <input ngControl="name1" name="name1" type="text" required/><br/>
        <input ngControl="text1" name="text1" type="text" required/><br/>
        <button class="btn btn-primary" [disabled]="!f1.form.valid">Next </button>
    </form>
</div>

<pre>
{{ form1 | json }}
</pre>

onSubmitForm1() 应该是什么样子，这样我才能得到如下所示的 form1：

{
    name1: "Michael Jackson",
    text1: "They don't really care about us"
}

我已经为那些想要帮助的人准备了一个复制+粘贴的组件：

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'form1',
    templateUrl: 'form1.component.html',
    styleUrls: ['form1.component.css']
})
export class Form1Component {

    form1 : any = {};

    constructor() { }

    onSubmitForm1 (data?:any) {
        // get raw data from form without bindings
        this.form1 = data;
        console.log("Data", data);
        return false;
    }
}

编辑：plnkr (http://plnkr.co/edit/nMPTYLGxgWzzJuD9Be3f?p=preview) 中的确切工作副本在 https://github.com/mgechev/angular2-seed 的种子中不起作用。可能是版本问题？？

双重绑定没有错误：

<div class="form-mantle">
    <form (ngSubmit)="onSubmitForm1(f1.value)" #f1="ngForm">
        <input [(ngModel)]="f1.name1" #name="ngModel" name="name1" type="text" required/><br/>
        <input [(ngModel)]="f1.text1" #name="ngModel" name="text1" type="text" required/><br/>
        <button class="btn btn-primary" [disabled]="!f1.form.valid">Next </button>
    </form>
</div>

<pre>
{{ f1.value | json }}
</pre>

【问题讨论】：

标签： forms data-binding angular

【解决方案1】：

只需在您的ngSubmit 中这样称呼它：

(ngSubmit)="onSubmitForm1(f1.value)"

为您要提交的每个控件添加ngControl 属性以设置其名称：

<input ngControl="name1" name="name1" type="text" required/><br/>
<input ngControl="text1" name="text1" type="text" required/><br/>

然后在你的onSubmitForm1:

onSubmitForm1 (data?:any) {
    console.log("Data", data);
    this.form1 = data;
}

Plunker 示例用法

【讨论】：

我现在已经尝试过了，不幸的是 (f1.value) 什么也没做：/
检查这个 Plunker：plnkr.co/edit/nMPTYLGxgWzzJuD9Be3f?p=preview
我有完全相同的副本，对象是空的，我在上面编辑我的问题并添加截图。也许我有版本问题，我使用来自github.com/mgechev/angular2-seed的种子
我刚刚看到，旧表单在 main.ts 的种子中被标记为已弃用。只需删除这两行 disableDeprecatedForms() 和 provideForms()。那么它应该可以正常工作。
但我想使用较新的版本，这是主要问题:)

【解决方案2】：

是的，目前 (rc4) 你只有两种在提交后接受数据的方式：

1) 模型驱动策略（绑定）

2) 模板驱动策略（ngControls）

【讨论】：

【解决方案3】：

以下方法终于奏效了（双重绑定：/）：

<form (ngSubmit)="onSubmitForm()" #s1="ngForm">
    <input [(ngModel)]="step1.name1"  [ngModelOptions]="{standalone: true}" type="text" required/><br/>
    <input [(ngModel)]="step1.text1"  [ngModelOptions]="{standalone: true}" type="text" required/><br/>
    <button class="btn btn-primary" [disabled]="!s1.form.valid">Next </button>
</form>

【讨论】：