/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {Directive, forwardRef, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf} from '@angular/core'; import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; import {AbstractFormGroupDirective} from './abstract_form_group_directive'; import {ControlContainer} from './control_container'; import {NgForm} from './ng_form'; import {TemplateDrivenErrors} from './template_driven_errors'; export const modelGroupProvider: any = { provide: ControlContainer, useExisting: forwardRef(() => NgModelGroup) }; /** * @description * Creates and binds a `FormGroup` instance to a DOM element. * * This directive can only be used as a child of `NgForm` (within `
` tags). * * Use this directive to validate a sub-group of your form separately from the * rest of your form, or if some values in your domain model make more sense * to consume together in a nested object. * * Provide a name for the sub-group and it will become the key * for the sub-group in the form's full value. If you need direct access, export the directive into * a local template variable using `ngModelGroup` (ex: `#myGroup="ngModelGroup"`). * * @usageNotes * * ### Consuming controls in a grouping * * The following example shows you how to combine controls together in a sub-group * of the form. * * {@example forms/ts/ngModelGroup/ng_model_group_example.ts region='Component'} * * @ngModule FormsModule * @publicApi */ @Directive({selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup'}) export class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy { /** * @description * Tracks the name of the `NgModelGroup` bound to the directive. The name corresponds * to a key in the parent `NgForm`. */ // TODO(issue/24571): remove '!'. @Input('ngModelGroup') name!: string; constructor( @Host() @SkipSelf() parent: ControlContainer, @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[], @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) { super(); this._parent = parent; this._validators = validators; this._asyncValidators = asyncValidators; } /** @internal */ _checkParentType(): void { if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm) && (typeof ngDevMode === 'undefined' || ngDevMode)) { TemplateDrivenErrors.modelGroupParentException(); } } }