如何修补formArray中的值答案

【问题标题】：how to patchvalue in formArray如何修补formArray中的值
【发布时间】：2019-12-12 23:19:05
【问题描述】：

我对带有 formarray 的 patchvalue 有疑问，它不断带出一个空数组。我希望能够在 formBuilder 中分别修补到视频和文档表单数组的视频和文档的 url，但它不起作用

.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

【问题讨论】：

你没有表单控件 "uploadVideo" 和 "uploadDocument" ，你把它命名为 "videos" 和 "documents"
我刚刚更新了代码
您可能误解了 FormArray 到底是什么。它不应该将您的 data 存储为数组，而是另一种存储 FormControls 的方式。其实FormArray和FormGroup是一样的，只不过不是FormControls的对象，而是FormControls的数组。你真的需要FormArray吗？否则，您还不如只使用一个 FormControl 来存储任何类型的数据数组。

标签： javascript angular typescript

【解决方案1】：

你尝试另一种方法来修补值

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

【讨论】：

【解决方案2】：

你能试试这个吗？

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

或者这个

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

【讨论】：