在Angular2 Forms中使用NgForm和NgControlGroup

时间:2015-09-30 14:25:23

标签: forms angular

我可以使用一个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});
  }

启动组件时我没有遇到任何错误,但控件不会采用初始值(&#34;首先&#34;,&#34;秒&#34;和等等)。这意味着HTML元素没有正确绑定到控件。有什么想法吗?有没有使用NgForm和NgControlGroup的好例子?

1 个答案:

答案 0 :(得分:0)

我弄清楚出了什么问题。应该使用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>