在Angular2中更新一个位于formArray中的formControl，它是一个文件输入。

15 浏览
0 Comments

在Angular2中更新一个位于formArray中的formControl，它是一个文件输入。

我有以下的代码：

import { Component, OnInit, ElementRef } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
@Component({
  selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  showSort: boolean = false;
  form: FormGroup;
  name: FormControl;
  sortSelf: FormControl;
  sortItem: FormArray;
  locationItems: FormArray;
  constructor(private _fb: FormBuilder, private _elementRef: ElementRef ) {
  }
  ngOnInit(): void {
    this.sortItem = this._fb.array([this.initSort()]);
    this.form = this._fb.group({
      sortItem: this.sortItem
    });
  }
  initSort() {
    return this._fb.group({
      locationPicture: new FormControl('', []),
      locationItems: this._fb.array([
        this.initSortItems()
      ])
    })
  }
  initSortItems() {
    return this._fb.group({
      itemPicture: new FormControl('', [])
    })
  }
  addSort() {
    this.sortItem.push(this.initSort());
  }
  addSortLocationItem(i?: number, t?: number) {
    const control: FormArray =  this.sortItem.at(i).get('locationItems');
    control.push(this.initSortItems());
  }
  showImage(event, level?: string, i?: number, t?: number){
    let file = event.target.files[0];
    if(level === 'locationPicture'){
      (this.sortItem.at(i)).controls['locationPicture'].setValue(file, {onlySelf: true});
    }else{
      (this.sortItem.at(i).get('locationItems')).at(t).get('itemPicture').setValue(file, {onlySelf: true});
    }
  }
  next(value, valid: boolean){
    console.log(`this is value ${JSON.stringify(value, null, 4)}`);
  }
 }

标记：

  

          
            添加分类位置 +
          
                  
                  
                  
                  
                  
                      图片是必需的
                  
                    
                      添加项目 +
                    
                  
                            
                            
                            
                            
                                图片是必需的

我试图通过更新表单控件的值来在showImage方法中更新表单。然而，我无法让表单根据图片进行更新。当我尝试在'locationPicture'和'itemPicture'上上传时，我会遇到以下错误：

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

请帮助我解决这个问题，谢谢。

0

1 答案

0 Comments

问题的出现原因是在Angular2中，当需要更新一个包含文件输入的formControl时，会遇到困难。在这个例子中，用户想要上传一个包含字符串和图像的FormData对象到Django REST API。他创建了一个名为"upload-image-form"的组件，其中包含一个FormGroup来表示表单，并且有一个file input用于上传图像。然而，他遇到了一个问题，无法更新file input的值。

解决方法是将file input的值与其他字段分开处理。他在组件中添加了一个private变量file，并在onChange()方法中捕获了file input的值。然后，在提交表单时，他使用FormData对象将该文件追加到formData中。通过遍历imageForm中的其他字段，将这些字段也追加到formData中。最后，他将formData传递给imageService的post()方法来进行提交。

这个问题的解决方法可以在以下链接找到：https://stackoverflow.com/a/41465502/2803344

这篇文章解决了在Angular2中更新一个包含文件输入的formControl的问题，并提供了一个实际的代码示例来演示解决方法。如果你在使用Angular2时遇到了类似的问题，希望这篇文章能对你有所帮助。你可以在上面的链接中找到完整的项目代码。

0