{ "id": "api/forms/NgModelGroup", "title": "NgModelGroup", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgModelGrouplink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Creates and binds a FormGroup instance to a DOM element.

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input('ngModelGroup')
name: string\n 		\n \n

Tracks the name of the NgModelGroup bound to the directive. The name corresponds\nto a key in the parent NgForm.

\n\n \n
\n
\n\n\n
\n

Inherited from AbstractFormGroupDirectivelink

\n \n
\n\n\n\n
\n

Inherited from ControlContainerlink

\n \n
\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n\n\n\n \n
\n

Template variable referenceslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
IdentifierUsage
ngModelGroup#myTemplateVar=\"ngModelGroup\"
\n
\n\n\n\n \n
\n

Descriptionlink

\n

This directive can only be used as a child of NgForm (within <form> tags).

\n

Use this directive to validate a sub-group of your form separately from the\nrest of your form, or if some values in your domain model make more sense\nto consume together in a nested object.

\n

Provide a name for the sub-group and it will become the key\nfor the sub-group in the form's full value. If you need direct access, export the directive into\na local template variable using ngModelGroup (ex: #myGroup=\"ngModelGroup\").

\n\n

Consuming controls in a groupinglink

\n

The following example shows you how to combine controls together in a sub-group\nof the form.

\n\nimport {Component} from '@angular/core';\nimport {NgForm} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form #f=\"ngForm\" (ngSubmit)=\"onSubmit(f)\">\n <p *ngIf=\"nameCtrl.invalid\">Name is invalid.</p>\n\n <div ngModelGroup=\"name\" #nameCtrl=\"ngModelGroup\">\n <input name=\"first\" [ngModel]=\"name.first\" minlength=\"2\">\n <input name=\"last\" [ngModel]=\"name.last\" required>\n </div>\n\n <input name=\"email\" ngModel>\n <button>Submit</button>\n </form>\n\n <button (click)=\"setValue()\">Set value</button>\n `,\n})\nexport class NgModelGroupComp {\n name = {first: 'Nancy', last: 'Drew'};\n\n onSubmit(f: NgForm) {\n console.log(f.value); // {name: {first: 'Nancy', last: 'Drew'}, email: ''}\n console.log(f.valid); // true\n }\n\n setValue() {\n this.name = {first: 'Bess', last: 'Marvin'};\n }\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n \n\n\n\n\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n\n \n \n\n
\n
\n\n\n" }