Angular changed with typescript input field value empty on submit

Question

I want to update input field by given name or id value with ts method with its id or name given with string.

I try diferent options with update ngModel ngValue but thats not it.

So i have an ipnut field

<div class="col-auto">
<input type="text" id="yproduct" name="yproduct" class="form-control"  ngModel required>
</div>

And i change its value form service with:

this.stockInfoService.caller.subscribe(
  data => {
    this.caller = data
    document.getElementById(this.caller).value = this.codeScan;
  }
);

Everything works on html side and the field value shows inside input, but when i submit the form i have empty yproduct value !

{yproduct: ''}

You shouldn't use the document object, Angular should be the one handling the DOM. Also, have you tried using either Template driven forms or Reactive forms? — Andres2142
– Andres2142, Commented Mar 24, 2022 at 17:22

Arnaud Denoyelle · Accepted Answer · 2022-03-24 17:27:40Z

Note : you should never have to call document.getElementById in Angular. If you end up manually using document at all, you probably have a design flaw.

[(ngModel)] enables to do some double data binding between a typescript variable and an <input>.

Correct usage is :

Typescript

foo = 42

HTML

<input [(ngModel)]="foo">

Then, on backend call, you would just have to modify the foo value and it would be reflected in the input

That being said, your main problem comes from the fact that you want to modify a field that is dynamically chosen by the backend. In order to do that, you can create multiple variables with a big switch case. That is easy, that would work but the code would be messy.

I would rather bind all <input> to different attributes of a data object :

TypeScript

  data = {
    foo: 42,
    bar: 51,
  }

HTML

<div>Foo : <input id="foo" [(ngModel)]="data.foo" /></div>
<div>Bar: <input id="bar" [(ngModel)]="data.bar" /></div>

And on backend call, you just have to modify the right data attribute :

TypeScript

  callBackend() {
    this.fakeService().subscribe((resp) => {
      this.data[resp] = this.codeScan;
    })
  }

See StackBlitz here

Collectives™ on Stack Overflow

Angular changed with typescript input field value empty on submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related