NgFormControl class

Binds an existing Control to a DOM element.

Example

In this example, we bind the control to an input element. When the value of the input element changes, the value of the control will reflect that change. Likewise, if the value of the control changes, the input element reflects that change.

@Component(
  selector: 'my-app',
  template: '''
    <div>
      <h2>NgFormControl Example</h2>
      <form>
        <p>Element with existing control:
          <input type="text" [ngFormControl]="loginControl">
        </p>
        <p>Value of existing control: {{loginControl.value}}</p>
      </form>
    </div>
  ''',
  directives: const [coreDirectives, formDirectives]
)
class App {
  Control loginControl = new Control('');
}

ngModel

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

Example

@Component(
     selector: "login-comp",
     directives: const [formDirectives],
     template: "<input type='text' [ngFormControl]='loginControl' [(ngModel)]='login'>"
     )
class LoginComp {
 Control loginControl = new Control('');
 String login;
}
Inheritance
Annotations
  • @Directive(selector: '[ngFormControl]', providers: [ExistingProvider(NgControl, NgFormControl)], exportAs: 'ngForm')

Constructors

NgFormControl(@Optional() @Self() @Inject(NG_VALIDATORS) List? validators, @Optional() @Self() @Inject(ngValueAccessor) List<ControlValueAccessor>? valueAccessors)

Properties

control → Control?
no setteroverride
dirty → bool?
no setterinherited
disabled → bool?
no setterinherited
enabled → bool?
no setterinherited
errors → Map<String, dynamic>?
no setterinherited
form ↔ Control?
getter/setter pair
hashCode → int
The hash code for this object.
no setterinherited
model ↔ dynamic
getter/setter pair
name ↔ String?
getter/setter pairinherited
path → List<String>
no setteroverride
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
update → Stream
Updates from the view itself.
no setteroverride
valid → bool?
no setterinherited
validator → ValidatorFn?
finalinherited
value → dynamic
no setterinherited
valueAccessor ↔ ControlValueAccessor?
getter/setter pairinherited
viewModel ↔ dynamic
getter/setter pair

Methods

ngAfterChanges() → void
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
reset({dynamic value}) → void
Resets the form control.
inherited
toggleDisabled(bool isDisabled) → void
inherited
toString() → String
A string representation of this object.
inherited
viewToModelUpdate(dynamic newValue) → void
override

Operators

operator ==(Object other) → bool
The equality operator.
inherited