76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. 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 `<form>` 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)) {
|
|
TemplateDrivenErrors.modelGroupParentException();
|
|
}
|
|
}
|
|
}
|