Question

我有一个可重复使用的组件，可以使用ng2-file-upload包通过模式上传文件。我希望它具有灵活性，因为我们将在多个位置使用它，但在每个位置，上传所需的附加表单值（如类型或名称）将是不同的。我正在模板中添加表单的HTML标记。

我通过传递给组件的配置获得应该与每次上传一起使用的FormGroup。我正在连接到ng2-file-upload事件以创建FormGroup，并在项目添加到上传队列时将其添加到FormArray。

我的所有ts代码似乎都运行得很好。我可以看到FormArray根据需要添加了FormGroups，我可以在控制台中访问值以及设置值并查看验证更改等。

但是，我似乎无法绑定视图。不知道发生了什么事。以下是该视图的相关部分：

  <form [formGroup]="form" novalidate>
    <div class="row"
      formArrayName="uploads"
      *ngFor="let upload of form.get('uploads').controls; let i=index">
      <div formArrayName="uploads">
            {{uploader.queue[i]?.file?.name}}
         <div class="row">
          <div class="col-12">
            <div [formGroupName]="i">
              {{form.controls.uploads.controls[i].controls.name.status}}
            <ng-container *ngTemplateOutlet="config.template; context: { i: i }"></ng-container>
            </div>
          </div>
        </div>

      </div>
    </div>
</form>



<!-- templates -->
<ng-template #customerDocument let-item="item" let-i="i">
     <div class="row">
      <div class="col-12">
        <input mdbActive 
          type="text" 
          class="form-control" 
          formControlName="name" 
          placeholder="Document Name" 
          required>
       </div>
    </div>
</ng-template>

我的表单控件状态按预期打印，但视图不会更改，并且您在视图中键入的任何内容都不会更改FormGroup。我错过了什么？

编辑以下是我在ngOnInit（）中启动表单的方式：

this.form = new FormGroup({
  uploads: new FormArray([])
});

在上传队列的add事件中，我添加了像这样传递给组件的FormGroup的副本，甚至可以修改该值并且它可以工作;

  let uploads = this.form.get('uploads') as FormArray;
  uploads.controls.push(formGroupCopy);
  this.form.get(['uploads', 0, 'name']).setValue('foo');

当使用FormGroups的FormArray时，Angular 5反应形式不会绑定

0 个答案: