在Angular2表单中使用NgForm和NgControlGroup

Question

I can code forms with one ControlGroup but I'm having trouble with multiple ControlGroups. According to the example code, NgControlGroup should be used inside <div> elements and NgForm should be used in the <form> element. So here's my markup:

<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>

Here's the code for the component's constructor:

  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});
  }

I don't get any errors when I launch the component, but the controls don't take their initial values ("first", "second", and so on). That means the HTML elements aren't being properly bound to the Controls. Any thoughts? Are there any good examples that use NgForm and NgControlGroup?

Answer 1

I figured out what was wrong. The NgModelForm directive should be used instead of NgModel. Also, the <input> elements should mention the proper names of the ControlGroup s. Here's the result:

<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>