angular - 类型 'controls' 上不存在属性 'AbstractControl' - angular4

Question

已经针对此错误发布了很多博客，但没有针对 angular4 指定任何博客。

我在表单上添加和删除动态控件

在初始化期间向窗体添加控件

    ngOnInit() {
    
        this.lienHolder = this._fb.group({
          emailAddress: ['', [Validators.required, Validators.email]],
          policyDetails: this._fb.array([
            this.initPolicyTemplate(),
          ])
        });
    
      }

     initPolicyTemplate() {
        return this._fb.group({
          policyNumber: ['', [Validators.required, Validators.pattern("(^[^0][A-Z]{1}[0-9]*$)")]],
          vinNumber: ['', [Validators.required, Validators.pattern('^[0-9]{6}$')]],
        });
      }

通过调用此方法添加更多控件

     addPolicyTemplate() {
        const control = <FormArray>this.lienHolder.controls['policyDetails'];
        control.push(this.initPolicyTemplate());
      }

从表单中删除控件

      removePolicyTemplate(i: number) {  
        const control = <FormArray>this.lienHolder.controls['policyDetails'];
        control.removeAt(i);
      }

但是当我构建代码时，我得到这样的错误

这是我的html

      <div formArrayName="policyDetails">
            <div *ngFor="let _policy of lienHolder.controls.policyDetails.controls; let i=index">
              <div class="panel panel-default">
                <div class="panel-head">
                  <div class="glyphicon glyphicon-remove pull-right" *ngIf="lienHolder.controls.policyDetails.controls.length > 1" (click)="removePolicyTemplate(i)"></div>
                </div>
                <div class="panel-body">
                  <div [formGroupName]="i">
                    <address [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></address>
                  </div>
                </div>
              </div>
            </div>
          </div>

我无法解决这个问题。我关注了this博客想出动态控件

更新 1

当我像这样更改我的 .ts 代码时

    get DynamicFormControls() {
    
        return <FormArray>this.lienHolder.get('policyDetails');
      }

和这样的 HTML 代码

     <div formArrayName="policyDetails">
            <div *ngFor="let _policy of DynamicFormControls.controls ; let i=index" style="position: relative">
              <add-policy-details [policyGroup]="lienHolder.controls.policyDetails.controls[i]"></add-policy-details>
              <div class="remove-btn" (click)="removePolicyTemplate(i)" *ngIf="lienHolder.controls.policyDetails.controls.length > 1">
              </div>
            </div>
          </div>

它工作正常，我能够使用命令在生产模式下编译文件

ng build --target=production --environment=prod

但是从过去的几天开始，我遇到了同样的错误并且无法在生产模式下编译它，我没有更新我的任何应用程序

节点版本 - v6.11.1

npm 版本 - 3.10.10

Angular 版本 - 4.0

不知道到底是什么导致了错误。

Answer 1

深入挖掘后找到了解决方案 here .当您进行生产构建时，您必须使用可以通过为您的组件提供 get 方法来解决的问题:

get formData() { return <FormArray>this.lienHolder.get('policyDetails'); }

然后在您的模板中:

<div *ngFor="let _policy of formData.controls ; let i=index">

希望这对你有用