CODEWITHSUNDEEP
typescriptangular
xmaestro
xmaestro

Reputation: 1094

Two way data binding to a Form control

I am trying to bind an input to a form control. Here is the input:

<input [(ngModel)]="someProperty" ngControl="someProperty">

And in the component

someProperty: Control;

someForm:ControlGroup;

...

constructor(private _form_builder: FormBuilder){

    this.someProperty = new Control('', Validators.required);

    this.someForm = this._form_builder.group({

        someProperty:this.someProperty

    });

}

So, is it allowed to bind input to a Form Control? Evidently i cannot do this as my input box is filled with [object Object] when i run. So what is the proper way to do this? I can create seperate property and do the two way binding that way but shouldn't the controls be able to handle bindings?

Upvotes: 0

Views: 10350

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202138

If you want to bind a form control to an input, you need to use the ngFormControl directive:

<input [(ngModel)]="somePropertyValue"
       [ngFormControl]="someProperty">

or

<input [(ngModel)]="somePropertyValue" 
       [ngFormControl]="someForm.controls.someProperty">

The ngControl directive is only to define inline controls.

See this article for more details:

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657048

someProperty needs to be the value of the <input>. This would be a string. ngControl should refer the control

<input [(ngModel)]="somePropertyValue" ngControl="someProperty">

somePropertyValue: string;

someProperty: Control;

someForm:ControlGroup;

...

constructor(private _form_builder: FormBuilder){

    this.someProperty = new Control('', Validators.required);

    this.someForm = this._form_builder.group({

        someProperty:this.someProperty

    });

}

See also https://angular.io/docs/ts/latest/guide/forms.html

Upvotes: 2

Related Questions