Html 角动态反应形式问题

我试图创建一个动态的反应形式。用户可以选择文本（类型=1）输入或img（类型=2）输入。根据他的选择，正在添加正确的输入。-他可以添加任意多的输入字段

我以前从未真正使用过反应形式，因此这个问题

下面的代码根据用户选择的模块添加控件，但例如，添加文本区域只会显示一个内部有

[object object]

的文本区域-单击会使其消失。

此外，我还没有弄清楚如何提交表单的输入。提交时记录

表单

将返回表单，但不包含文本区域的输入。

这就是我到目前为止的情况：

<form [formGroup]="form" (ngSubmit)="onSubmit()">

    <div *ngFor="let module of form.get('modules').controls; let i = index" class="position-relative" [style.padding-bottom.rem]="paddingValue" (mouseover)="showPaddingInput = true" formArrayName="modules">

      <div class="padding-input position-absolute d-flex justify-content-center" *ngIf="showPaddingInput === true" [style.height.rem]="paddingValue">
        <input type="text" class="align-self-center text-center padding-input-field" [value]="paddingValue" (input)="changePadding(padding.value)" #padding>
      </div>

      <div class="text" *ngIf="module.value.type === 1">
        <textarea class="flow-text" placeholder="Some Text..." rows="3" [formControlName]="i"></textarea>
      </div>

      <div class="img-container" *ngIf="module.value.type === 2">
        <div class="custom-file align-self-center">
          <input type="file" id="i" class="custom-file-input" [formControlName]="i" (change)="handleFileInput($event.target.files)">
          <label class="custom-file-label" for="i"></label>
        </div>
      </div>

    </div>

    <button class="btn btn-dark">Submit</button>

</form>

---

表单控件的第一个参数是它的值，因此您将初始值设置为对象，这就是为什么它在文本框中显示[object object]。。。这就是对对象调用.toString（）时得到的结果，您需要像下面这样实例化它们：

const control = new FormControl('', Validators.required);

或者类似的事情。。。这会影响您构建模板的方式，因此您可能需要类似以下内容：

const group = new FormGroup({
   type: new FormControl(1),
   value: new FormControl('', Validators.required)
});

并将该组添加到阵列中，然后像以下方式访问该组：

  <div class="text" *ngIf="module.get('type').value === 1" [formGroupName]="i">
    <textarea class="flow-text" placeholder="Some Text..." rows="3" formControlName="value"></textarea>
  </div>

---

谢谢！对我有用。不过还有一件事-如何在提交时获得这个精确数组的数据？

  <div class="text" *ngIf="module.get('type').value === 1" [formGroupName]="i">
    <textarea class="flow-text" placeholder="Some Text..." rows="3" formControlName="value"></textarea>
  </div>