Question

我能找到的最好的教程，关键的是，this one ....只适用于已弃用（很快就会完全消失）的表单。

据我所知，这是新表格的唯一文件： https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

我设法安装@ angular / forms（在here的帮助下）并且可以通过复制粘贴上面文档中的示例来获得单级表单...但是，我在实施任何其他任何事情时，或者在编译时没有定义整个表单结构的任何事情都会花费很多时间。

我希望构建一个允许我拖放和删除表单问题的应用程序。此外，一些问题也会有子问题，我也想从服务中提取问题（因此无法在文档显示时提前对表单布局进行硬编码）< / p>

似乎至少在我的用例中，每个'问题'最好有一个组件。然后，每个组件都会在其模板中拥有自己的表单。

也就是说，我希望ParentComponent让它的模板看起来像这样：

<h1>Parent Component</h1>

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

然后在子表单中我们根据发送的“问题”构建每个模板。为了举个例子，有些事情（对于可能包含错误的事实道歉，我直接在这里......稍后会尝试偷窃）：

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似乎是我应该寻找的地方，但似乎需要在编译时构建整个表单结构...（如果您搜索“绑定现有表单，可以稍后根据文档更新数据”异步单向绑定“...但我似乎无法使表单结构在运行时动态发生”

Answer 1

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

也许它可以帮到你

新角色如何在angular2

1 个答案: