在 Angular2 表单中使用 NgForm 和 NgControlGroup

Question

我可以使用一个 ControlGroup 编写表单代码，但我在使用多个 ControlGroup 时遇到了问题。根据示例代码，NgControlGroup 应该在 <div> 元素中使用，NgForm 应该在 <form> 元素中使用。所以这是我的标记：

<form ng-form="main" (ng-submit)="handleSubmit()">
  <div ng-control-group="group1" >
    <input ng-control="c1"><br /><br />
    <input ng-control="c2"><br /><br />
  </div>
  <div ng-control-group="group2">
    <input ng-control="c3"><br /><br />
    <input ng-control="c4"><br /><br />
  </div>  
  <input type="submit" value="Submit">
</form>

这是组件构造函数的代码：

  constructor() {
    this.group1 = new ControlGroup({
      "c1": new Control("first"), 
      "c2": new Control("second")});

    this.group2 = new ControlGroup({
      "c3": new Control("third"), 
      "c4": new Control("fourth")});

    this.main = new ControlGroup({
      "g1": this.group1, "g2": this.group2});
  }

我在启动组件时没有收到任何错误，但控件没有采用它们的初始值（"first"、"second"，等等）。这意味着 HTML 元素没有正确绑定到控件。有什么想法吗？有没有使用 NgForm 和 NgControlGroup 的好例子？

Answer 1

我知道出了什么问题。应该使用 NgModelForm 指令而不是 NgModel。此外，<input> 元素应提及 ControlGroup 的专有名称。结果如下：

<form [ng-form-model]="main" (ng-submit)="handleSubmit()">
  <div ng-control-group="g1" >
    <input ng-control="c1"><br /><br />
    <input ng-control="c2"><br /><br />
  </div>
  <div ng-control-group="g2">
    <input ng-control="c3"><br /><br />
    <input ng-control="c4"><br /><br />
  </div>  
  <input type="submit" value="Submit">
</form>

在 Angular2 表单中使用 NgForm 和 NgControlGroup

Using NgForm and NgControlGroup in Angular2 Forms

forms

angular