如何在formArray中修补值

时间:2019-12-12 09:26:08

标签: javascript angular typescript

我在使用formarray的patchvalue时遇到问题,它不断带出一个空数组。 我希望能够在formBuilder中分别将视频和文档的URL修补到视频和文档formarray上,但不起作用

.ts文件

 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)
      }
    }
  }

日志 我无法为文档formArray和视频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 个答案:

答案 0 :(得分:0)

您尝试使用另一种方法来补丁Value

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

答案 1 :(得分:0)

您可以尝试吗?

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

或者这个

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