“AbstractControl”类型上不存在属性“控件” - angular4答案

【问题标题】：Property 'controls' does not exist on type 'AbstractControl' - angular4“AbstractControl”类型上不存在属性“控件” - angular4
【发布时间】：2018-01-26 01:18:39
【问题描述】：

已经有很多博客针对这个错误发布了，但没有为 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

角度版本 - 4.0

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

【问题讨论】：

尝试使用 this.lienHolder.get('policyDetails').removeAt(i);...对于添加控件也一样
我试过了，我得到了同样的错误
在一些博客中它要求我添加 [formGroupName]="i"，但我仍然面临同样的错误
对不起我的错误..try ..lienHolder.controls.get('policyDetails').length...在模板中..这就是它给出错误的地方
你为什么要使用lienHolder.controls.policyDetails.controls.length ??

标签： angular angular4-forms

【解决方案1】：

深入挖掘后找到了解决方案here。当你在进行生产构建时，你必须使用这个问题，可以通过给你的组件一个get方法来解决：

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

然后在您的模板中：

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

希望这对你有用

【讨论】：

我从内心深处感谢你，上帝保佑你
很高兴为您提供帮助 :)
链接：angular.io/api/forms/... github.com/angular/...
过去几天我遇到了同样的错误，尽管我没有更改代码
这是我唯一有效的解决方案..你在其他地方搞砸了..

【解决方案2】：

我在ng build 上也遇到了同样的问题，但只是用 [] 解决了，

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

使用上面一行代替下面一行

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

【讨论】：

这对我有用。简单几乎总是更好。 +1 来自我。就我而言，我使用的是 Angular 5。
@Muthu 谢谢这对我有用。但是你能解释一下为什么它会这样工作吗？有什么区别？
这其实是一个简单的解决方案。非常感谢
@Sonja - 此线程的最新答案可能会回答您的问题

【解决方案3】：

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

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

更新：

禁止使用“”语法进行类型断言。请改用“as”语法

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

【讨论】：

你能添加一些词来解释你的答案吗？
感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。
什么时候提供的正确答案还不够好？当它发布在sadoverflow中时
这是个好主意。我刚刚更新了一个答案。

【解决方案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>

现在生产版本工作正常。

【讨论】：

【解决方案5】：

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

这对我不起作用：

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

改成：

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

删除了错误。

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

【讨论】：

【解决方案6】：

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

当您想要获得特定控件时：

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

【讨论】：

【解决方案7】：

github 解决了此问题。最简单的方法是在 *ngFor 中使用 yourFormArray['controls'] 而不是 yourFormArray.controls，或者如果你有一个 get 访问器，你可以使用它来访问控件。

【讨论】：

【解决方案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);

【讨论】：