表单组中表单数组中的角度订阅值更改 [英] Angular Subscribe valuechanges in formarray in form group

问题描述

我是 angular8，我在表单组中有一个表单数组，但我想检测某个输入的新变化.

I'm angular8 and I have a form array inside of form group but I want to detect new changes of a certain input.

ngOnInit(): void {
    this.makeForm = this.fb.group({

     
      
      year:['', Validators.required],
      amount:['', Validators.required],
      desc:['', Validators.required],
      details: new FormArray([
        this.det(), 
      ])
    })


det(){
      return new FormGroup({
        requestfor     : new FormControl(''),
        remarks        : new FormControl('')
    })}

我必须检查formarray值中每个值都发生变化的数据.但是如果我使用

I have to check the data that every value changes in formarray values. But I am getting error if I use

this.makeForm.value.details.get('requestfor').valueChanges

错误是

ERROR TypeError: Cannot read property 'valueChanges' of undefined

如何获取表单数组中的值

how to get the value inside of form array value

如何获取值.....

推荐答案

创建 FormGroup 时需要订阅 valuesChanges

You need subscribe to valuesChanges, when you create the FormGroup

det(){
   //use an auxiliar const
   const group=new FormGroup({
        requestfor     : new FormControl(''),
        remarks        : new FormControl(''),
        // file_id        : new FormControl(''),
    })}
    //subscribe
    group.get('requestForm').valueChanges.subscribe(res=>{
    })
    //return group
    return group;
}

你也可以拥有一个 Observables 数组，并将索引传递给你的函数 det

changesArray:Observable[]=[] //<--don't forget initialize

det(index=0){
   //use an auxiliar const
   const group=new FormGroup({
        requestfor     : new FormControl(''),
        remarks        : new FormControl(''),
        // file_id        : new FormControl(''),
    })}
    //fill the array
    this.changesArray[index]=group.get('requestForm').valueChanges
    //return group
    return group;
}

当你向formArray添加或删除一个新组时，订阅一个forkJoin数组

 if (this.subscriptions)
    this.subscriptions.unsubscribe();

 this.subscriptions=forkJoin(changesArray)
    this.subscriptions.subscribe(res=>{
 })

更新如果我们想控制整个数组，我们可以定义一个可观察的数组和一个订阅:

Update If we want control the whole array, we can define an array of observables and a subcriptions:

  observables:Observable<any>[]=[]
  suscription:Subscription

我们需要创建一个函数来订阅一个 CombineLastest

We need make a function where we are going to subscribe to a CombineLastest

  controlChange()
  {
    if (this.suscription)
      this.suscription.unsubscribe()

    this.suscription=combineLatest(this.observables.map(
      (o,i)=>o.pipe(startWith(this.array.controls.length>i?this.array.value[i].one:null))
      )).subscribe(res=>{
      console.log(res)
    })

  }

我们在移除一个元素时调用这个函数

We call to this function, when remove an element

  removeGroup(index)
  {
    this.array.removeAt(index);
    this.observables.splice(index,1)
    this.controlChange()
  }

并在函数组 Array 中向 this.observables 添加一个新元素

And in function group Array add a new element to this.observables

  groupArray(data:any=null)
  {
    data=data || {one:null,two:null}
    const group=new FormGroup({
      one:new FormControl(data.one),
      two:new FormControl(data.two)
    })
    this.observables[this.array.controls.length]=group.get('one').valueChanges
    this.controlChange()
    return group
  }

注意:我在代码的最后一部分使用了 getter

NOTE: I this last part of code I use a getter

  get array() {
    return this.form.get("array") as FormArray;
  }

stackblitz

这篇关于表单组中表单数组中的角度订阅值更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！