Question

我有一个组件，该组件根据给定的对象显示一些表单字段。通常，父组件每次都会提供一个新对象，而在父组件中循环调用该组件，然后，子组件根据类型显示正确的元素。

但是有时，元素可以是 iterable ，是可重复的元素（在FormArray的情况下）。我有以下代码：

<div [formGroup]="form">

  <ng-template #formTmpl
               let-field="field"
               let-index="index">
    <pre>index: {{ index }}</pre>
    <label [attr.for]="!!question.iterable ? question.key + index : question.key">{{ question.label }}</label>

    <div [ngSwitch]="question.controlType">

      <div [attr.formArrayName]="!!question.iterable ? question.key : null">
        <input *ngSwitchCase="'textbox'"
               [class]="isValid ? config.validClass : config.invalidClass"
               [formControlName]="!!question.iterable ? index : question.key"
               [placeholder]="question.placeholder"
               [id]="!!question.iterable ? question.key + index : question.key"
               [type]="question['type']">

        <select [id]="question.key"
                *ngSwitchCase="'dropdown'"
                [class]="isValid ? config.validClass : config.invalidClass"
                [formControlName]="question.key">
          <option value=""
                  disabled
                  *ngIf="!!question.placeholder"
                  selected>{{ question.placeholder }}</option>
          <option *ngFor="let opt of question['options']"
                  [value]="opt.key">{{ opt.value }}</option>
        </select>

        <textarea *ngSwitchCase="'textarea'"
                  [formControlName]="question.key"
                  [id]="question.key"
                  [class]="isValid ? config.validClass : config.invalidClass"
                  [cols]="question['cols']"
                  [rows]="question['rows']"
                  [maxlength]="question['maxlength']"
                  [minlength]="question['minlength']"
                  [placeholder]="question.placeholder"></textarea>
      </div>
    </div>

    <div class="errorMessage"
         *ngIf="!isValid">{{ question.label }} is required</div>

  </ng-template>

  <div *ngIf="question.iterable; else formTmpl">
    val {{questionArray.value | json}}
    <div *ngFor="let field of questionArray.controls; let i=index; last as isLast">
      <ng-container [ngTemplateOutlet]="formTmpl"
                    [ngTemplateOutletContext]="{field: field, index: i}"></ng-container>
      <button *ngIf="question.iterable && isLast"
              type="button"
              (click)="addItem(question)">+</button>
    </div>
  </div>

</div>

目前，我正在仅在inputs 上测试元素的可重复性。

因此对于一个元素来说，它工作良好，但是无法获得对可选指令的引用：[attr.formArrayName]="!!question.iterable ? question.key : null"

如果尝试以下操作（将输入直接输入ng-container，而不调用ng-template：

  <div *ngIf="question.iterable; else formTmpl">
    val {{questionArray.value | json}}
    <div *ngFor="let field of questionArray.controls; let i=index; last as isLast">
      <input [class]="isValid ? config.validClass : config.invalidClass"
             [formControlName]="i"
             [placeholder]="question.placeholder"
             [id]="question.key"
             [type]="question['type']">
      <button *ngIf="question.iterable && isLast"
              type="button"
              (click)="addItem(question)">+</button>
    </div>
  </div>

输入字段显示良好，并且Form的值与之绑定良好。

奇怪的是formControlName内每个字段的ng-template的值都很好地绑定到了表单上。

我在初始化表单时遇到的错误是：

ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (vendor.js:74769)
    at setUpControl (vendor.js:74593)
    at FormGroupDirective.addControl (vendor.js:78338)
    at FormControlName._setUpControl (vendor.js:78989)
    at FormControlName.ngOnChanges (vendor.js:78912)
    at checkAndUpdateDirectiveInline (vendor.js:59547)
    at checkAndUpdateNodeInline (vendor.js:70213)
    at checkAndUpdateNode (vendor.js:70152)
    at debugCheckAndUpdateNode (vendor.js:71174)
    at debugCheckDirectivesFn (vendor.js:71117)

然后，如果我向formArray添加新元素，则新元素出现但未绑定，并且此新错误显示：

ERROR Error: Cannot find control with name: '1'
    at _throwError (vendor.js:74769)
    at setUpControl (vendor.js:74593)
    at FormGroupDirective.addControl (vendor.js:78338)
    at FormControlName._setUpControl (vendor.js:78989)
    at FormControlName.ngOnChanges (vendor.js:78912)
    at checkAndUpdateDirectiveInline (vendor.js:59547)
    at checkAndUpdateNodeInline (vendor.js:70213)
    at checkAndUpdateNode (vendor.js:70152)
    at debugCheckAndUpdateNode (vendor.js:71174)
    at debugCheckDirectivesFn (vendor.js:71117)

那么我该如何考虑formArrayName属性的字段？

您可以在下面看到标记中存在该属性（但我认为它通常是ng-reflect-name），但仍然无法正常工作：

作为最后一个示例，这是表单的屏幕截图（请注意每个可重复输入上方的索引）：

Here is the StackBlitz example

Answer 1

我认为[attr.formArrayName]="!!question.iterable ? question.key : null"绑定不起作用，因为它是按attribute binding instead of input binding执行的

但是，当我们将其转换为输入绑定时，您的用例中的非FormArray问题会出现新的错误。

因此，使用旧的formControl指令而不是formControlName就可以解决问题。

[formControl]="form.get(question.iterable ? [question.key, index] : question.key)"

通过这种方法，您也不再需要[attr.formArrayName]="!!question.iterable ? question.key : null"绑定

这是工作中的demo

在ng-template

1 个答案: