javascript - react 形式 : input type "file" reset by addControl()

Question

在 Angular 7 和 ReactiveForm 中，如果我将文件放入 <input type="file"> ，然后我添加一行 formgroup.addControl() , 所有 <input type="file">被重置。

我卡住了，因为 type="file"不能再次初始化，具有个人功能，因为它们必须是具有字符串空值的初始化。

堆栈 Blitz :https://stackblitz.com/edit/angular-yvk6nb

我需要保留 type="file"使用 addControl 添加行时的值

Answer 1

您的表单结构已关闭。如果你要输入 <pre>{{formgroup.value | json}}</pre>在您的 stackblitz 中，您会发现结构不正确并导致您出现问题。

这似乎是对 FormArray 的完美使用相反，这就是我的建议:

myForm: FormGroup;

constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
  // wrap the formarray inside a formgroup
  this.myForm = this.formBuilder.group({
    files: this.formBuilder.array([
      this.initRow()
    ])
  })
}

// called when adding a new row
addRow() {
  (<FormArray>this.myForm.get('files')).push(this.initRow());
}

// creates and returns a new formgroup
initRow() {
  const blanckForm = this.formBuilder.group({
    name: [''],
    file: ''
  });
  return blanckForm;
}

你的模板看起来像:

<form [formGroup]="myForm">
  <div formArrayName="files">
    <div *ngFor="let file of myForm.get('files').controls; let i = index" [formGroupName]="i">
      <input formControlName="name" type="text">
      <input formControlName="file" type="file">
    </div>
  </div>
</form>

<input type="button" (click)="addRow()" value="ADD ROW">

你的 fork STACKBLITZ