【问题标题】:How do new forms work in angular2新形式如何在 angular2 中工作
【发布时间】:2016-06-22 01:45:23
【问题描述】:

我可以在那里找到最好的教程,至关重要的是,this one.... 仅适用于已弃用(并且很快将完全消失)的表单内容。

据我所知,这是新表单的唯一文档: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

我设法安装了@angular/forms(在here 的帮助下),并且可以通过从上面复制粘贴文档中的示例来获得单级表单......但是,我有在编译时实现任何其他或任何未定义整个表单结构的东西真是太费时间了。

我希望构建一个允许我拖放和删除表单问题的应用程序。此外,一些问题也会有子问题,我也想从服务中提取问题(因此无法像文档显示的那样提前对表单布局进行硬编码)

看来,至少对于我的用例来说,最好为每个“问题”配备一个组件。然后,每个组件都会在其模板中拥有自己的表单。

也就是说,我希望 ParentComponent 的模板看起来像这样:

<h1>Parent Component</h1>

<form (submit)="onSubmit()" *ngFor='let question of questions'>
    <subform [question]='question'></subform>
</form>

然后在子表单中,我们将根据发送的“问题”构建每个模板。举个例子,类似(抱歉,这可能包含错误,我直接写在这里...稍后会尝试plunkr):

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

@Component({
    selector: 'subform',
    template: `
        <h3>{{question.label}}</h3>
        <form *ngFor='let option of question.getOptions()'
            <input type="radio" name="gender" value="[option]" checked> {{option}}<br>
       </form>
    `
})
export class ChildComponent {
    @Input() question
 }

我似乎无法弄清楚使这样的事情起作用的语法并给我参考,以便我可以在表单选项更改时更新数据。关于这个主题的每个页面或教程似乎都给出了不同的答案(包括angular documentation of forms(它给出了“你正在使用已弃用的东西”的警告)......并且都与上面的办公室更改文档不同。

FormGroup 似乎是我应该寻找的地方,但这似乎需要在编译时构建整个表单结构......(如果您搜索“将现有表单与异步单向绑定”...但我似乎无法在运行时动态地构建表单结构)

【问题讨论】:

  • 新表格仍在进行中。您不应该期望一切都已经正常工作。
  • 所以您会建议使用已弃用的表单构建该应用程序,然后再迁移一两个月? (不是说我知道如何用“旧”表单做我想做的事......但至少有一些文档)
  • 新表格不会和旧表格完全不同。几个名称已经并将更改,常见问题将得到修复。如果您只是在学习,我建议您使用旧的,直到您对表单的工作方式感到满意或直到新表单的文档可用为止。

标签: forms angular


【解决方案1】:

检查一下: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

也许对你有帮助

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-21
    • 1970-01-01
    • 2017-11-02
    • 1970-01-01
    • 2018-06-01
    • 2017-07-25
    相关资源
    最近更新 更多