angular - ngFor Angular 2+ 中未加载索引

问题描述

语境

我在 Angular 6 的 formGroup 中有一个formArray和一些与数组元素交互的函数，如下所示（component.ts）：

form: FormGroup

constructor(private builder: FormBuilder) { }

ngOnInit() {
  this.form = this.builder.group({
    ingreso: '',
    salida: '',
    habitaciones: this.builder.array([])
  })
}

get habitacionForms() {
  return this.form.get('habitaciones') as FormArray;
}

addHabitacion() {
  var habitacion = this.builder.group({
    tipo: '',
    piso: '',
    numero: '',
  })
  this.habitacionForms.push(habitacion);
}

deleteHabitacion(habIndex) {
  this.habitacionForms.removeAt(habIndex)
}

视图（component.html）是：

<!-- Form starts here -->
    <form class="form-horizontal" [formGroup]="form" (ngSubmit)="submitHabitacion()">
      <div class="box-body">

        <div class="form-group">
          <label for="ingreso" class="col-sm-2 control-label">Fecha de ingreso</label>
          <div class="col-sm-8">
            <input type="date" class="form-control" formControlName="ingreso" id="ingreso" placeholder="">
          </div>
        </div>

        <div class="form-group">
          <label for="salida" class="col-sm-2 control-label">Fecha de salida</label>
          <div class="col-sm-8">
            <input type="date" class="form-control" formControlName="salida" id="salida" placeholder="">
          </div>
        </div>

        <!-- Habitaciones -->
        <div class="col-md-9 col-md-offset-1">
          <div class="box box-primary" *ngFor="let habitacion of habitacionForms.controls; let i = index"
      [formGroupName]="i">
      {{i}}
        <div class="box-header with-border">
          <h3 class="box-title">Habitación #{{i + 1}}</h3>
          <button type="button" class="btn btn-danger" style="margin: 2px; margin-left: 6%"
          (click)="deleteHabitacion(habIndex)">Eliminar</button>
        </div>

        <div class="box-body">
          <div class="form-group">
            <label for="tipo" class="col-sm-2 control-label">Tipo</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" formControlName="tipo" id="tipo" placeholder="">
            </div>
          </div>

          <div class="form-group">
            <label for="piso" class="col-sm-2 control-label">Piso</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" formControlName="piso" id="piso" placeholder="">
            </div>
          </div>

          <div class="form-group">
            <label for="numero" class="col-sm-2 control-label">Número</label>
            <div class="col-sm-8">
              <input type="numero" class="form-control" formControlName="numero" id="numero" placeholder="">
            </div>
          </div>
        </div>

        <div class="box-footer">
          <button type="submit" class="btn btn-success col-md-6 col-md-offset-3">Agregar cliente</button>
        </div>

      </div>
    </div>

    <button type="button" class="btn btn-warning col-md-7 col-md-offset-2"
      (click)="addHabitacion()">Agregar habitación</button>

      </div>

      <div class="box-footer">
        <button type="submit" class="btn btn-primary col-md-9 col-md-offset-1">Agregar nueva reserva</button>
      </div>

    </form>

问题

当我运行程序时，我按下“Agregar Habitacion”按钮，该按钮应该在formArray上创建一个新元素，它会将元素正确添加到“habitacion” formArray，但会跳转此错误：

“错误：在 setUpFormContainer (forms.js:1781) 的 _throwError (forms.js:1799) 处找不到具有未指定名称属性的控件...”

错误跳转到对应于 *ngFor 指令行的第 28 行。似乎没有加载索引，因为显示索引的标记在我将值放入生成的formArray实例的输入中之前不会检索它，并且神奇地找到并显示了索引。

标签： angularngforangular-forms

angular - ngFor Angular 2+ 中未加载索引

问题描述

解决方案

推荐阅读