Binding to [value] doesn't update FormControl's value

Question

More Info:

I have a list of items. Each item is an instance of a MyClass. MyClass has a property text and a method someMethod() that returns this property.

I have an *ngFor that lists all items on the page and when I click one of them (click)="currentItem = item" is executed and the [value]="someMethod()" is actually [value]="currentItem.someMethod()", so the selected item's text is written into the textarea.

I'm using Reactive forms and have the following in my template:

<textarea formControlName="myTextarea" [value]="someMethod()" ...

When the page renders and someMethod() outputs a string, I can see that string displaying inside the textarea.

However, the value property of the FormControl is not updated. Why?

Here is the stackblitz code https://stackblitz.com/edit/angular-mzk5e8 Another option is to use patchValue() — Suresh Kumar Ariya, Aug 06 '18 at 14:46
That's right, it answers the question, so I accept it, but you must check out the stackblitz source code to understand — tom, Aug 06 '18 at 17:18

score 1 · Answer 1 · answered Aug 06 '18 at 15:15

1

look this link https://coursetro.com/posts/code/108/Angular-5-Interpolation,-Property-Binding-&-Event-Binding-Tutorial#

You can use [(ngModel)] with Reactive forms.

<form [formGroup]="form">
<input name="fname" formControlName="first" [(ngModel)]="example.first">
<input name="lname" formControlName="last" [(ngModel)]="example.last">
</form>
export class App {
form: FormGroup;
example = { fname: '', lname: ''}
constructor(builder: FormBuilder) {
 this.form = builder.group({ first: '', last:''}) 
}
}

answered Aug 06 '18 at 15:15

Machhindra Neupane

679
7
20

With `[(ngModel)]` it could be done, Angular 6 shows me a deprecated warning however and tells me that I shouldn't use it together with `formControlName`. – tom Aug 06 '18 at 16:48
export class App { form: FormGroup; object {name}; constructor(builder: FormBuilder) { this.form = builder.group( myFormControlName: [this.object.name, Validators.required] ); } } – Machhindra Neupane Aug 06 '18 at 23:49
You can't use ngModel with reactive form. Use [(value)] instead – Tuvia Khusid Nov 01 '19 at 02:51

score 0 · Answer 2 · answered Aug 06 '18 at 14:53

0

That's because you are calling SomeMethod() in [value].

what are you looking for exactly ?

take a look here FormGroup

answered Aug 06 '18 at 14:53

RedOne

115
1
1
5

Binding to [value] doesn't update FormControl's value

2 Answers2