Adding/Updating text/value of an Input Field after change (Angular)

Question

Say I have this setup:

template: <input [(ngModel)]="myValue" type="text" /> <button (click)="addText">Click me</button> {{myValue}}

code:

 addtext()
{
this.myValue='test';
}

If I click the button the inputfield stays empty, but the {{myValue}} is updated. How can I add the text to the inputfield (or better update it, since the nGModel has the real value already)?

Edit:

When clicking the button a child component is shown where the user adds/selects some data. When the child is filled, an event is emitted with the data of the child component. The parent reacts via an "onFilled"-event and changes the model. But since the View doesnt know about the changes, the input is not updated (even the ng-reflect-model is correct).

So my real question is: How to force angular to run an update on the view / rerender it?

Emit-Part:

Child:

@Output myEmitter:new EventEmitter<object>();

filled(){
this.myEmitter.emit({value:'Test'});
}

Parent: (myEmitter)='onMyEmitter($event)' added to input

 onMyEmitter(value) {this.myValue = value}

Milan Lakhani · Accepted Answer · 2020-04-07 13:40:06Z

0

I think you are not calling click event function.

<input [(ngModel)]="myValue" type="text" />
<button (click)="addtext()">Click me</button> //addText changed to addtext()
{{myValue}}

You can check it working at : https://angular-h7uata.stackblitz.io

code : https://stackblitz.com/edit/angular-h7uata

answered Apr 7, 2020 at 13:40

Milan Lakhani

5243 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Myko Over a year ago

That was a typo, sorry. But the main problem is the not updating inputfield, not the click event. The original source (where it doesnt work) is a bit more complex, but unfortunately on a "non-internet" machine, so I sketched it here.

Milan Lakhani Over a year ago

Was'nt your goal to display text in the input field? I think the stackblitz example covers that.

Myko Over a year ago

I will update my question to try to explain it better.

Milan Lakhani Over a year ago

so do you want to update your value of myValue on changing text in Input field?

Collectives™ on Stack Overflow

Adding/Updating text/value of an Input Field after change (Angular)

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related