Невозможно получить доступ к значениям поля ввода, установленным интерполяцией {{}} - PullRequest
Новая
       7

Невозможно получить доступ к значениям поля ввода, установленным интерполяцией {{}}

0 голосов
/ 19 января 2020

Я работаю над очень простым приложением, оно включает форму с formArray. В форме Array можно выбрать название и количество товара. Когда выбраны оба параметра, третье поле ввода - total - вычисляет общую стоимость товара (цена продукта * сумма), используя 

<input matInput placeholder="total"
  type="number"
  formControlName="total"
  value="{{getProductPrice(purchaseForm.value.product[i].productId) * purchaseForm.value.product[i].amount}}">

. Я бы хотел сложить Итого поле ввода (цена) всех предметов в formArray. Значение отображается ОК, если я изменяю какой-либо продукт и / или количество, оно изменяется автоматически.

Моя проблема в том, что, когда я пытаюсь получить доступ к значениям total inputfields, я получаю 0 . Если я изменяю значение вручную (вставка, ввод и т. Д. c.), То я могу получить к нему доступ сразу.

Я могу получить доступ к другому полю (например, я могу вычислить сумму СУММ для всех продукты)

Проблема вызвана тем, как я устанавливаю значение поля?

Кто-нибудь знает, почему это так?

Ответы [ 2 ]

0 голосов
/ 20 января 2020 
//create an array of totals
totals:number[]=[];
total:number; //<--use a variable to store the total

//After create the form Array
this.yourFormArray.valueChanges(res=>{
   let total=0;
   res.forEach((x:any,index:number)=>{
     //use the "+" to convert to number res.amount;
     totals[index]=(+x.amount)*(this.getProductPrice(x.productId));
     total+=totals[index]
   })
   this.total=total;
}
0 голосов
/ 19 января 2020

Когда вы используете value, вы привязываетесь к атрибуту HTML с именем value, который обновит DOM, но никогда не обновит значение вашей формы. Чтобы обновить значение формы, вы можете использовать ngModel в сочетании с такими реагирующими формами, но я не рекомендую: 

<input matInput placeholder="total"
  type="number"
  formControlName="total"
  [ngModel]="getProductPrice(purchaseForm.value.product[i].productId) * purchaseForm.value.product[i].amount">

Вы должны никогда устанавливать значение из такого взгляда. Но этот код будет работать. Возможно, более правильным способом было бы следить за изменениями значений в форме и устанавливать итоговые значения на основе новых значений. Что-то вроде этого: 

ngOnInit() {
  // Watch our form and set value of total based on qty and price.
  // NOTE: In real life be sure to unsubscribe from this subscription when component is destroyed.
  // You ALSO probably only want to respond to certain value changes here.
  this.form.valueChanges.subscribe(formValues => {
    if (someValueIndicatingWeNeedToUpdateTotal === true) {
      this.form.get('total').setValue(1 * 2); // Obviously replace this with real logic
    }
  })
}

В любом случае, я создал рабочий пример, с которым вы можете поиграть в StackBlitz .

...