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 [coreDirectives, formDirectives]
})
class App {

  String data;

  void onSubmit(data) {
    data = JSON.encode(data);
  }
}

Inheritance

Implementers

MemorizedForm

Annotations

@Directive(selector: 'form:not([ngNoForm]):not([ngFormModel]):not([memorizedForm]),' 'ngForm,[ngForm]', providers: [ExistingProvider(ControlContainer, NgForm)], exportAs: 'ngForm', visibility: Visibility.all)

Constructors

NgForm(@Optional() @Self() @Inject(NG_VALIDATORS) List? validators, ChangeDetectorRef changeDetectorRef)

Properties

changeDetectorRef → ChangeDetectorRef: finalinherited
control → ControlGroup?: no setterinherited
controls → Map<String?, AbstractControl>?: no setterinherited
dirty → bool?: no setterinherited
disabled ↔ bool?: getter/setter pairinherited
enabled → bool?: no setterinherited
errors → Map<String, dynamic>?: no setterinherited
form ↔ ControlGroup?: getter/setter pairinherited
formDirective → Form: Get the form to which this container belongs.
no setterinherited
hashCode → int: The hash code for this object.
no setterinherited
name ↔ String?: getter/setter pairinherited
ngBeforeSubmit → Stream<ControlGroup>: An event that is fired before the main form submission event.
no setterinherited
ngSubmit → Stream<ControlGroup>: An event fired with the user has triggered a form submission.
no setterinherited
path → List<String>: no setterinherited
pristine → bool?: no setterinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
touched → bool?: no setterinherited
untouched → bool?: no setterinherited
valid → bool?: no setterinherited
value → dynamic: no setterinherited

Methods

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
createGroup(NgControlGroup _) → ControlGroup: override
findContainer(List<String?> path) → ControlGroup?: 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 nonexistent method or property is accessed.
inherited
onReset(Event? event) → void: inherited
onSubmit(Event? event) → void: 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: 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 ==(Object other) → bool: The equality operator.
inherited