检测具有特定值的多个实例的表单组中的更改

Question

首先，如果我说的话没有任何意义，我深表歉意，因为我对编程还很陌生。请随时更正 me/ask 以澄清任何不明确的地方。

我有一个检测变化的代码：

    this.myForm.get('terminal.**0**.sparePartCost')?.valueChanges.subscribe(x => {
        ...some function executes
    })

如果我要添加另一个表单组实例，我将使用 1 而不是 0 访问此实例：

    this.myForm.get('terminal.**1**.sparePartCost')?.valueChanges.subscribe(x => {
        ...some function executes
    })

我需要能够做到这一点，但数量不确定。换句话说，有没有一种方法可以访问它，以便它检测我指的是哪个表单组。例如：

    this.myForm.get('terminal.**X**.sparePartCost')?.valueChanges.subscribe(x => {
        ...some function executes based on the value of X
    })

提前致谢:)

Answer 1

Tj，get('name.'+index+'.property')的用途是管理一个FormArray。 formArray 可以是 FormControls 的 FormArray（不是你的情况）或 FormGroup 的 FormArray。

为了管理 FormGroup 的 FormArray，我们创建了一个函数，return formArray

  get terminalFormArray(){
    return this.myForm?this.myForm.get('terminal') as FormArray:null
  }

通常是 util make 一个函数，return 一个 FormGroup，我想有些像

getGroup():FormGroup{
  return new FormGroup({
       sparePartCost:new FormControl(),
       otherField:new FormControl()
  })
}

做点像

   myForm=new FormGroup({
       terminal:new FormArray(
           this.getGroup(),
           this.getGroup()
       )
   })

但是如果你想控制 formArray 中的 Field 的变化，你可以像这样定义函数 createGroup

getGroup(index):FormGroup{

  index=index || (this.terminalFormArray?this.terminalFormArray.length:0)

  constr group=new FormGroup({
       sparePartCost:new FormControl(),
       otherField:new FormControl()
  })
  group.get('sparePartCost').valueChanges.subscribe(res=>{
         ..make something with the res and index..
       console.log(res,index)
  })
  return group;
}

而你使用 as

   myForm=new FormGroup({
       terminal:new FormArray(
           this.getGroup(0),
           this.getGroup(1)
       )
   })

或

   this.terminalFromArray.push(this.getGroup())

见stackblitz

检测具有特定值的多个实例的表单组中的更改

Detect changes in a form group with multiple instances of a specific value

angular

formgroups