Angular 4 ngSubmit не получает значения из заполненных входов jquery

Я заполняю значения поля ввода формы программно с помощью jquery. Значения видны в форме. Когда я console.log данные формы при отправке, эти данные не содержат значений. Когда я изменяю значения вручную, данные действительно содержат значения:

Я запускаю функцию, заполняющую поле ввода:

 $('#itemNum').val('myNewValue');

Это заполняет ввод следующим образом:

<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">

Я прекрасно вижу это недавно заполненное значение в поле ввода. Если я отредактирую этот ввод, я могу получить значение при отправке. Но если я оставлю все как есть, он вернет только свойства, определенные компонентом:

export class MyComponent implements OnInit {
  item: Item = {
    number:0,
    ...
  }
  onSubmit(value){ console.log(value) }
}

Как я могу заставить ngForm / ngModel / ngSubmit видеть эти заполненные значения jquery?

К вашему сведению, моя форма выглядит так:

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">
...
<input type="submit" class="btn btn-primary" value="Confirm">
</form> 

person edoras    schedule 15.10.2017    source источник


Ответы (1)


Angular и jQuery - это разные вещи, Angular не может узнать об изменениях, внесенных jQuery, которые вам не следует использовать, поскольку это то, для чего вы используете Angular.

Если вам нужно изменить значение программно, просто:

this.item.number = 10;

И если бы вы использовали вместо этого реактивные формы, вы бы сделали это так:

this.form.get('item.number').setValue(10);
person Christian    schedule 15.10.2017
comment
Спасибо, Кристиан, я понял это, увидев stackoverflow.com/a/17110709/4493441. Моя задача заключалась в попытке создать форму из строки таблицы, созданной с помощью цикла ngFor. Я понял, что форма просто дублирует усилия, и просто запустил мою функцию отправки прямо из той строки таблицы, где в любом случае были все данные. Спасибо за вашу помощь! - person edoras; 16.10.2017