时间戳

首页 > 解决方案 > ReactiveForms：输入类型“文件”由 addControl() 重置

javascript - ReactiveForms：输入类型“文件”由 addControl() 重置

问题描述

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

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

Stackblitz：https ://stackblitz.com/edit/angular-yvk6nb

type="file"当我使用 addControl 添加行时，我需要保留这些值

标签： javascriptangularangular-reactive-formsreactive-forms

解决方案

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

这似乎是对 a 的完美使用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">

你的分叉STACKBLITZ

推荐阅读