NgFormModel class

Binds an existing control group to a DOM element.

Example

In this example, we bind the control group to the form element, and we bind the login and password controls to the login and password elements.

@Component(
  selector: 'my-app',
  template: '''
    <div>
      <h2>NgFormModel Example</h2>
      <form [ngFormModel]='loginForm">
        <p>Login: <input type="text" ngControl="login"></p>
        <p>Password: <input type="password" ngControl="password"></p>
      </form>
      <p>Value:</p>
      <pre>{{value}}</pre>
    </div>
  ''',
  directives: const [formDirectives]
})
class App {
  ControlGroup loginForm;

  App() {
    loginForm = new ControlGroup({
      login: new Control(""),
      password: new Control("")
    });
  }

  String get value {
    return JSON.encode(loginForm.value);
  }
}

We can also use ngModel to bind a domain model to the form.

@Component(
     selector: "login-comp",
     directives: const [formDirectives],
     template: '''
       <form [ngFormModel]='loginForm'>
         Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
         Password <input type='password' ngControl='password'
                         [(ngModel)]='credentials.password'>
         <button (click)="onLogin()">Login</button>
       </form>'''
     )
class LoginComp {
 credentials: {login: string, password: string};
 ControlGroup loginForm;

 LoginComp() {
   loginForm = new ControlGroup({
     login: new Control(""),
     password: new Control("")
   });
 }

 void onLogin() {
   // credentials.login === 'some login'
   // credentials.password === 'some password'
 }
}

Inheritance

Object
AbstractControlDirective<AbstractControlGroup>
ControlContainer<AbstractControlGroup>
NgFormModel

Annotations

@Directive(selector: '[ngFormModel]', providers: [ExistingProvider(ControlContainer, NgFormModel)], exportAs: 'ngForm', visibility: Visibility.all)

Constructors

NgFormModel(@Optional() @Self() @Inject(NG_VALIDATORS) List? validators)

Properties

control → AbstractControlGroup?: no setterinherited
directives ↔ List<NgControl>: getter/setter pair
dirty → bool?: no setterinherited
disabled → bool?: no setterinherited
enabled → bool?: no setterinherited
errors → Map<String, dynamic>?: no setterinherited
form ↔ AbstractControlGroup?: getter/setter pair
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<AbstractControlGroup>: An event that is fired before the main form submission event.
no setterinherited
ngSubmit → Stream<AbstractControlGroup>: 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.
override
addControlGroup(NgControlGroup dir) → void: Add a group of controls to this form.
override
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
ngAfterChanges() → void
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.
override
removeControlGroup(NgControlGroup dir) → void: Remove a group of controls from this form.
override
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