If NgForm is bound in a component, <form> elements in that component will be upgraded to use the Angular form system.

Typical Use

Include formDirectives in the directives section of a View annotation to use NgForm and its associated controls.

Structure

An Angular form is a collection of Controls in some hierarchy. Controls can be at the top level or can be organized in ControlGroups or ControlArrays. This hierarchy is reflected in the form's value, a JSON object that mirrors the form structure.

Submission

The ngSubmit event signals when the user triggers a form submission.

Example

@Component(
  selector: 'my-app',
  template: '''
    <div>
      <p>Submit the form to see the data object Angular builds</p>
      <h2>NgForm demo</h2>
      <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
        <h3>Control group: credentials</h3>
        <div ngControlGroup="credentials">
          <p>Login: <input type="text" ngControl="login"></p>
          <p>Password: <input type="password" ngControl="password"></p>
        </div>
        <h3>Control group: person</h3>
        <div ngControlGroup="person">
          <p>First name: <input type="text" ngControl="firstName"></p>
          <p>Last name: <input type="text" ngControl="lastName"></p>
        </div>
        <button type="submit">Submit Form</button>
      <p>Form data submitted:</p>
      </form>
      <pre>{{data}}</pre>
    </div>''',
  directives: const [CORE_DIRECTIVES, formDirectives]
})
class App {

  String data;

  void onSubmit(data) {
    data = JSON.encode(data);
  }
}
Inheritance
Implements
Annotations
  • @Directive(selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]', providers: const [formDirectiveProvider], host: const {'(submit)' : 'onSubmit(\$event)'}, exportAs: 'ngForm')

Constructors

NgForm(@Optional() @Self() @Inject(NG_VALIDATORS) List validators)

Properties

control ControlGroup
@override, read-only
controls → Map<String, AbstractControl>
read-only
form ControlGroup
read / write
formDirective Form
Get the form to which this container belongs.
@override, read-only
ngBeforeSubmit → Stream<ControlGroup>
@Output(), read-only
ngSubmit → Stream<ControlGroup>
@Output(), read-only
path → List<String>
Get the path to this container.
@override, read-only
dirty → bool
read-only, inherited
errors → Map<String, dynamic>
read-only, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
name String
read / write, 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

Methods

addControl(NgControl dir) → void
Add a control to this form.
addControlGroup(NgControlGroup dir) → void
Add a group of controls to this form.
findContainer(List<String> path) ControlGroup
@protected
getControl(NgControl dir) Control
Look up the Control associated with a particular NgControl.
getControlGroup(NgControlGroup dir) ControlGroup
Look up the ControlGroup associated with a particular NgControlGroup.
onSubmit(Event event) → void
removeControl(NgControl dir) → void
Remove a control from this form.
removeControlGroup(NgControlGroup dir) → void
Remove a group of controls from this form.
updateModel(NgControl dir, value) → void
Update the model for a particular control with a new value.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toString() → String
Returns a string representation of this object.
inherited

Operators

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