Блог

Я angular8, и у меня есть массив форм внутри группы форм, но я хочу обнаружить новые изменения определенного ввода.

 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. Но я получаю сообщение об ошибке, если я использую

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

 

и ошибка

 ERROR TypeError: Cannot read property 'valueChanges' of undefined
 

как получить значение внутри значения массива формы

Как получить значение…..

Вам нужно подписаться на изменения значений при создании 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;
}
 

Вы также можете иметь массив наблюдаемых и передавать индекс в свою функцию 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, подписываетесь на разветвление массива

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

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

Обновить
Если мы хотим управлять всем массивом, мы можем определить массив наблюдаемых и вложений:

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

Нам нужно создать функцию, в которой мы будем подписываться на 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)
    })

  }
 

Мы вызываем эту функцию, когда удаляем элемент

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

И в массиве группы функций добавьте к этому новый элемент.наблюдаемые

   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
  }
 

ПРИМЕЧАНИЕ: В этой последней части кода я использую средство получения

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

Стекблитц

       ngOnInit(): void {
        this.makeForm = this.fb.group({
    
         
          
          year:['', Validators.required],
          amount:['', Validators.required],
          desc:['', Validators.required],
          details: new FormArray([
            this.det(), 
          ])
        })
    
    
    det(){
          fomrgroup2 = new FormGroup({
            requestfor     : new FormControl(''),
            remarks        : new FormControl(''),
            // file_id        : new FormControl(''),
             })
          formgroup2.valueChanges.subscribe(val => {
             console.log(val.requestfor);
             console.log(val.remarks);
             //One of those 2 here will be changed. Check their values and do whatever 
            //processing you want to do inside this subscription
               });
       return formgroup2;
    }