NgForm class

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
Implementers
Annotations
  • @Directive(selector: 'form:not([ngNoForm]):not([ngFormModel]):not([memorizedForm]),' 'ngForm,[ngForm]', providers: const [const ExistingProvider(ControlContainer, NgForm)], exportAs: 'ngForm', visibility: Visibility.all)

Constructors

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

Properties

control ControlGroup
read-only, inherited
controls → Map<String, AbstractControl>
read-only, inherited
dirty → bool
read-only, inherited
disabled ↔ bool
@Input('ngDisabled'), read / write, inherited
enabled → bool
read-only, inherited
errors → Map<String, dynamic>
read-only, inherited
form ControlGroup
read / write, inherited
formDirective Form
Get the form to which this container belongs.
read-only, inherited
hashCode → int
The hash code for this object. [...]
read-only, inherited
name ↔ String
read / write, inherited
ngBeforeSubmit → Stream<ControlGroup>
An event that is fired before the main form submission event. [...]
@Output(), read-only, inherited
ngSubmit → Stream<ControlGroup>
An event fired with the user has triggered a form submission.
@Output(), read-only, inherited
path → List<String>
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

Methods

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

Operators

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