窗体组中的窗体数组中的有角订阅值更改 [英] 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(''),
        // file_id        : 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

如何获得价值.....

How to get the 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

我们需要创建一个函数来预订CombineBasstest

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
  }

注意:我这最后的代码我使用了吸气剂

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

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

stackblitz

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