angular - “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>

我无法解决这个问题。我已经按照这个博客提出了动态控制

更新 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

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

score 20 · Accepted Answer

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

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

然后在您的模板中：

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

希望这对你有用

score 13 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

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;
}

阅读有关使用 FormArray 动态创建表单字段的更多信息

score 3 · Accepted Answer

就我而言，问题是我提到函数的返回类型为 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>

现在生产构建工作正常。

score 2 · Accepted Answer

在这种情况下，方括号[]和单引号 ['controls']应该可以解决问题。此外，当您必须迭代 2 次时controls。这是此类主题的一个很好的答案：JavaScript 属性访问：点表示法与方括号？.

这对我不起作用：

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

将其更改为：

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

删除了错误。

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

score 2 · Accepted Answer

是的，这是一个奇怪的错误，虽然该类FormGroup包含一个名为controls
但你可以试试这个：
在循环中：
<div *ngFor="let _policy of formData['controls'] ; let i=index">

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

您可以使用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);

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

8 回答 8

Related

Reference