how to patchvalue in formArray

0
votes

i have an issue with patchvalue with a formarray, it keeps bringing out an empty array. i want to be able urls of the videos and documents patched to the video and document formarray respectively inside the formBuilder but it isn't working

.ts file

 ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      uploadName: ['',Validators.required],
      uploadPrice: ['',Validators.required],
      uploadAuthor: ['',Validators.required],
      uploadDes: ['',Validators.required],
      uploadImage: ['',Validators.required],
      numberofVideo: [''],
      videos: new FormArray([]),
      numberofDoc: [''],
      documents: new FormArray([])
    })
  }
  get f(){
    return this.uploadForm.controls;
  }
  get t(){
    return this.f.videos as FormArray;
  }
  get x(){
    return this.f.documents as FormArray;
  }

  onSubmit(){
    this.submitted = true;
    console.log('click')
    if(this.uploadForm.invalid){
      return;
    }
    this.uploadForm.patchValue({
      uploadImage:this.imageUrl,
      uploadVideo:this.videoUrls,
      uploadDocument:this.pdfUrls
    })
    console.log(this.uploadForm.value);
    this.itemService.addItem(this.uploadDetail);
    Object.keys(this.uploadForm.controls).forEach(key => {
      this.uploadForm.get(key).setErrors(null) ;
    });
  }

  onChangeVideo(e){
    const numberOfVideo = e.target.value || 0;
    if(this.t.length < numberOfVideo){
      for(let i=this.t.length;i<numberOfVideo;i++){
        this.t.push(this.formBuilder.group({
          uploadVideo: new FormControl('')
        }));
      }
    }else{
      for(let i = this.t.length; i >= numberOfVideo;i--){
        this.t.removeAt(i)
      }
    }
  }

  onChangeDoc(e){
    const numberOfDoc = e.target.value || 0;
    if(this.x.length < numberOfDoc){
      for(let i=this.x.length;i<numberOfDoc;i++){
        this.x.push(this.formBuilder.group({
          uploadDocument:new FormControl('')
        }));
      }
    }else{
      for(let i = this.x.length; i >= numberOfDoc;i--){
        this.x.removeAt(i)
      }
    }
  }

the log i can't patchvalue to the document formArray and video formArray

  {uploadName: "example1", uploadPrice: "1500", uploadAuthor: "tobi", uploadDes: "show description", uploadImage: "https://firebasestorage.googleapis.com/v0/b/video-…=media&token=f761e0b6-ec36-4eb5-aa3b-a2432d0422d8", …}
    documents: Array(1)
    0: {uploadDocument: ""}
    length: 1
    __proto__: Array(0)
    numberofDoc: "1"
    numberofVideo: "2"
    uploadAuthor: "tobi"
    uploadDes: "show description"
    uploadImage: "https://firebasestorage.googleapis.com/v0/b/video-store-795f5.appspot.com/o/images%2F960x480-san-diego-california.png?alt=media&token=f761e0b6-ec36-4eb5-aa3b-a2432d0422d8"
    uploadName: "example1"
    uploadPrice: "1500"
    videos: Array(2)
    0: {uploadVideo: ""}
    1: {uploadVideo: ""}
    length: 2
    __proto__: Array(0)
    __proto__: Object
2
javascriptangulartypescript
You don't have form control "uploadVideo" and "uploadDocument" , you named it "videos" and "documents" - Ahmed Kesha
i just updated the code - fafowora tobi
You might be misunderstanding what a FormArray exactly is. It's not supposed to store your data as an array, but rather it is another way of storing your FormControls. In fact, a FormArray is the same as a FormGroup, just not an object of FormControls, but an array of FormControls. Do you really need a FormArray here? Otherwise, you might as well just use a a FormControl that stores an array of any kind of data. - Philipp Meissner

2 Answers

1
votes

you try another way to patchValue

this.uploadForm.get('uploadImage').setValue(this.imageUrl);
this.uploadForm.get('uploadVideo').setValue(this.videoUrls);
this.uploadForm.get('uploadDocument').setValue(this.pdfUrls);
0
votes

Could you try this ?

this.uploadForm.get('videos').setValue(this.videoUrls);
this.uploadForm.get('documents').setValue(this.pdfUrls);

Or this 

this.uploadForm.patchValue({
 videos:this.videoUrls,
 documents:this.pdfUrls
});