属性'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 version - 3.10.10

角度版 - 4.0

不知道究竟是什么导致错误。

Answer 1

挖掘深度后找到解决方案here。当你进行生产构建时，你必须通过给你的组件一个get方法来修复问题：

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

然后在你的模板中：

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

希望这适合你

Answer 2

我在ng build上也面临同样的问题，但只是用[]，

修复

*ngFor="let _policy of DynamicFormControls['controls'] ; let i=index"

使用上面的行而不是下面的行

 *ngFor="let _policy of DynamicFormControls.controls ; let i=index"

Answer 3

是的，尽管类FormGroup包含一个名为controls的文件，但这是一个奇怪的错误
但是您可以尝试一下：
在循环中：
<div *ngFor="let _policy of formData['controls'] ; let i=index">

要获得特定控件时：

<div *ngIf="form.get('myCntrol').touched && form.get('myCntrol').errors"></div>

Answer 4

在我的情况下，我提到函数的返回类型为FormArray。我现在删除了返回类型，我的getter方法看起来像这样

 get eventExtraDetailsArray(){
    return this.addEventExtraForm.get('regDetails') as FormArray;
  }

在HTML中，我将代码修改为类似的内容

<div formArrayName="regDetails">
          <div *ngFor="let eventCharge of addEventExtraForm['controls'].regDetails['controls']; let regIdx = index"
            [formGroupName]="regIdx">
 </div>
</div>

现在，生产版本可以正常工作了。

Answer 5

在这种情况下，

方括号 [] 和单引号 ['controls'] 应该可以解决此问题。同样，当您必须迭代两次以上controls时。对于此类主题，以下是一个很好的答案：JavaScript property access: dot notation vs. brackets?。

这对我不起作用：

let brand of productsForm.controls.brands.controls; ...

将其更改为：

let brand of productsForm['controls'].brands['controls']; ...

消除了错误。

  

使用方括号表示法可以访问包含特殊字符的属性，并可以使用变量选择属性

Answer 6

此问题已在github上得到解决。最简单的方法是在* ngFor中使用yourFormArray ['controls']而不是yourFormArray.controls，或者如果您有get访问器，则可以使用该访问器。

Answer 7

getArrayControls() {
    return (<FormArray>this.sampleForm.get('formArr')).controls;
  }

<div *ngFor="let elem of getArrayControls(); let i = index" [formGroupName]="i">
  <input formControlName="sampleElementOfArr">
</div>

Answer 8

您可以使用 push 和 removeAt 方法：

// to push form group
const firstArray = this.invoiceForm.get('invoiceList') as FormArray;
const secondArray = firstArray.controls[j].get('packingList') as FormArray;
secondArray.push(this.initPackingList());

// to remove form group
const firstArray = this.invoiceForm.get('invoiceList') as FormArray;
const secondArray = firstArray.controls[j].get('packingList') as FormArray;
secondArray.removeAt(deletingIndex);