NgControlGroup class

Creates and binds a control group to a DOM element.

This directive can only be used as a child of NgForm or NgFormModel.


  selector: 'my-app',
  directives: const [formDirectives],
  template: '''
      <h2>Angular2 Control &amp; AbstractControlGroup Example</h2>
      <form #f="ngForm">
        <div ngControlGroup="name" #cg-name="form">
          <h3>Enter your name:</h3>
          <p>First: <input ngControl="first" required></p>
          <p>Middle: <input ngControl="middle"></p>
          <p>Last: <input ngControl="last" required></p>
        <h3>Name value:</h3>
        <p>Name is {{cgName?.control?.valid ? "valid" : "invalid"}}</p>
        <h3>What's your favorite food?</h3>
        <p><input ngControl="food"></p>
        <h3>Form value</h3>
class App {
  String valueOf(NgControlGroup cg) {
    if (cg.control == null) {
      return null;
    return JSON.encode(cg.control.value, null, 2);

This example declares a control group for a user's name. The value and validation state of this group can be accessed separately from the overall form.

  • @Directive(selector: '[ngControlGroup]', providers: const [const ExistingProvider(ControlContainer, NgControlGroup)], exportAs: 'ngForm')


NgControlGroup(@SkipSelf() ControlContainer<AbstractControlGroup> _parent, @Optional() @Self() @Inject(NG_VALIDATORS) List validators)


control AbstractControlGroup
Get the AbstractControlGroup backing this binding.
read-only, override
disabled ↔ bool
@Input('ngDisabled'), read / write, inherited-getter
formDirective Form
Get the Form to which this group belongs.
read-only, override
name ↔ String
@Input('ngControlGroup'), read / write, inherited-getter, override-setter
path → List<String>
Get the path to this control group.
read-only, override
validator ValidatorFn
dirty → bool
read-only, inherited
enabled → bool
read-only, inherited
errors → Map<String, dynamic>
read-only, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
pristine → bool
read-only, inherited
runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited
touched → bool
read-only, inherited
untouched → bool
read-only, inherited
valid → bool
read-only, inherited
value → dynamic
read-only, inherited


ngOnDestroy() → void
Executed before the directive is removed from the DOM and destroyed. [...]
ngOnInit() → void
Executed after the first change detection run for a directive. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
reset({dynamic value }) → void
Resets the form control. [...]
toggleDisabled(bool isDisabled) → void
toString() → String
Returns a string representation of this object.


operator ==(dynamic other) → bool
The equality operator. [...]