Question

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

我之所以陷入困境，是因为type="file"不能再通过个人喜好进行初始化，因为它们必须使用字符串null值进行初始化。

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

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

Answer 1

您的表单结构已关闭。如果将<pre>{{formgroup.value | json}}</pre>放入堆栈闪电中，则会发现该结构不正确，并导致了问题。

这似乎是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

ReactiveForms：通过addControl（）重置输入类型“文件”

1 个答案: