javascript - 如何修补 formArray 中的值

Question

我在使用 formarray 时遇到 patchvalue 的问题，它不断产生空数组。 我希望能够将视频和文档的 url 分别修补到 formBuilder 内的视频和文档 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

Answer 1

您尝试另一种方式来 patchValue

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