遍历 Angular 响应式表单

Question

我有一个动态创建的 Angular 响应式表单。

我有一个函数，当“速率”或“数量”字段发生变化时会调用该函数。我想遍历表单并将每个项目的费率和数量相乘，然后将它们加在一起以获得总计。

我该怎么做？我试过使用 .forEach，但这似乎不适用于 FormArrays

这是我表单的 json 结构：

{
  "quoteDate": "2019-01-11T11:00:00",
  "quoteItems": [
    {
      "description": "",
      "quoteLineItems": [
        {
          "rate": 8,
          "quantity": 78,
        },
        {
          "rate": 2,
          "quantity": 32,
        }
      ]
    },
    {
      "description": "",
      "quoteLineItems": [
        {
          "rate": 24,
          "quantity": 5,
        }
      ]
    },
    {
      "description": "",
      "quoteLineItems": [
        {
          "rate": 1,
          "quantity": 2145,
        }
      ]
    }
  ]
}  

这就是我创建表单的方式：

createForm() {
    this.quoteForm = this.fb.group({
      quoteDate: [this.quote.quoteDate, Validators.required],
      quoteItems: this.fb.array([])
    });
    this.addQuoteV2Item();
}

get quoteItems() {
  return this.quoteForm.get('quoteItems') as FormArray;
}

quoteLineItems(index) {
  return (this.quoteForm.get('quoteItems') as FormArray).at(index).get('quoteLineItems') as FormArray

}

addQuoteItem() {
  this.quoteItems.push(this.fb.group({
    description: '',
    quoteLineItems: this.fb.array([])
  }));
}

addQuoteLineItem(index, description) {
  this.quoteLineItems(index).push(
    this.fb.group({
      rate: '',
      quantity: '',
      total: 0
    })

  )
}

Answer 1

这就是我最终解决的方法：

updateTotal() {
  var subtotal = 0;
  var numberOfQuoteItems = (this.quoteForm.get('quoteItems') as FormArray).length;

  for (let i = 0; i < numberOfQuoteItems; i++) {
      var numberOfQuoteLineItems = ((this.quoteForm.get('quoteItems') as FormArray).at(i).get('quoteLineItems') as FormArray).length;
      for (let j = 0; j < numberOfQuoteLineItems; j++) {
        var currentLineItem = ((this.quoteForm.get('quoteItems') as FormArray).at(i).get('quoteLineItems') as FormArray).at(j);
        subtotal = subtotal + currentLineItem.value.rate * currentLineItem.value.quantity;
      }
  }
  this.subtotal = subtotal;

}

Answer 2

你需要的是 valueChanges 方法，它返回一个 observable，所以你需要订阅它。

ngOnInit() {
  this.quoteForm.valueChanges.subscribe(inputField => {
    if (inputField.rate) {
      // Do something with the rate value
    } else if (inputField.quantity) {
      // Do something with the quantity value
    }
  });
}