Angular 2 中用于访问 formArray 的 AOT 编译错误

Question

这是我的表单组

this.createOrderForm = this.fb.group({
      items: this.fb.array([])
    });

要在按钮上添加项目，请单击

 addItem() {
    const control = <FormArray>this.createOrderForm.controls['items'];
    const addrCtrl = this.initItem();
    control.push(addrCtrl);
  }

项目形式组是

initItem() {
    return this.fb.group({
      est_delivery_date: [''],
      est_delivery_time: [''],
      parentServices: ['', Validators.required],
      services: [''],
      brands: ['', Validators.required],
      sizes: ['',Validators.required],
      products: ['', Validators.required],
      discounts: [''],
      is_express_delivery: [''],
      is_packing: [''],
      confirmed: [''],
      coupon: ['']
    });
  }

在我的 html

<div class="panel panel-default margin-20">
          <h4 class="form-group col-xs-12">Items</h4>
          <div formArrayName="items">
            <div *ngFor="let item of createOrderForm.get('items').controls; let i=index" class="panel panel-default">
              <div class="panel-heading col-xs-12">
                <h5>Item {{i + 1}}</h5>
                <span class="ion-close pull-right" *ngIf="createOrderForm.get('items').controls.length > 1" (click)="removeItem(i)"></span>
              </div>
              <div class="panel-body" [formGroupName]="i">
                <createitem [pickup]="pickup_date" [group]="createOrderForm.get('items').controls[i]"></createitem>
              </div>
            </div>
          </div>
        </div>

我在 AOT 编译时遇到以下错误

属性 'controls' 在类型 'AbstractControl' 上不存在。

请帮我弄清楚为什么会出现这个错误，因为它在 jit 编译器中运行得很好。

Answer 1

模板中的这一行是 Aot 编译问题的原因。

createOrderForm.get('items').controls

你需要这样做而不是

let item of createOrderForm.get('items').controls

有这样的东西

let item of getItem(createOrderForm)

在组件中使用下面的

  getItem(form){
    return form.get('items').controls
  }

Angular 2 中用于访问 formArray 的 AOT 编译错误

Error on AOT Compilation in Angular 2 for accessing formArray

angular2-forms

angular2-aot

angular