类型“AbstractControl”Angular 4 上不存在属性“控件”[重复]

Posted 2023-02-22

【中文标题】类型“AbstractControl”Angular 4 上不存在属性“控件”[重复]

【英文标题】：Property 'controls' does not exist on type 'AbstractControl' Angular 4 [duplicate]

【发布时间】：2018-04-06 04:12:16

【问题描述】：

我正在 Angular 4 中尝试嵌套的响应式表单。它工作正常，但是当我尝试构建 AOT 时它会抛出错误

“AbstractControl”类型上不存在“控件”

我用谷歌搜索并尝试了一些东西，但没有运气。谁能告诉我如何解决这个问题？

<div [formGroup]="myForm">
    <div formArrayName="addresses">
        <div *ngFor="let address of myForm.get('addresses').controls; let i=index" 
                    class="panel panel-default">
            <span *ngIf="myForm.get('addresses').length > 1"
                    (click)="removeAddress(i)">Remove</span>
            <div [formGroupName]="i">
                <mat-form-field>
                    <input matInput formControlName="city" placeholder="city" value="">
                </mat-form-field>
            </div>

        </div>
    </div>
    <a (click)="addAddress()" style="cursor: default"> Add +</a>
</div>

打字稿代码如下

constructor(private _fb: FormBuilder)      


ngOnInit() 
    this.myForm = this._fb.group(
        addresses: this._fb.array([
            this.initAddress(),
        ])
    );

initAddress() 
    return this._fb.group(
        city: ['']
    );

addAddress() 
    const control = <FormArray>this.myForm.get('addresses');
    control.push(this.initAddress());

removeAddress(i: number) 
    const control = <FormArray>this.myForm.get('addresses');
    control.removeAt(i);

【问题讨论】：

我认为首选的方式是myForm.get('addresses')

@GünterZöchbauer 我们需要在 html ngFor 或 Typescript 中使用它吗？

如果myForm 是AbstractControl，则两者都应该工作

@GünterZöchbauer 根据您的建议更新了问题中的代码，它工作正常但 AOT 抛出相同的错误:(任何想法？请检查代码

创建像 get addressesControls() return (<FormArray>this.myForm.get('addresses')).controls; 这样的 getter 或者只使用下面的 myForm.get('addresses')['controls']

【参考方案1】：

基于@Günter Zöchbauer cmets，首先我改变了

myForm.controls['addresses'] 到 myForm.get('addresses') 在 html 和 typescript 中

然后根据@yuruzi 评论

将myForm.get('addresses').controls 更改为myForm.get('addresses')['controls']

它现在工作正常。谢谢@gunter & yuruzi

【讨论】：

我的案例：form.get('user')['controls'].profile。没关系 tnks

这对我来说是天衣无缝的。谢啦！在 tempate myForm.get('addresses')['controls'] 在 ts const control = this.myForm.controls.addresses as FormArray

有点魔法，它必须在没有数组符号的情况下工作......

它对我有用，谢谢！

【参考方案2】：

不过，您可以轻松修复它。将“获取控件”逻辑外包到组件代码的方法中（.ts 文件）：

getControls() 
  return (this.recipeForm.get('controlName') as FormArray).controls;

在模板中，然后可以使用：

*ngFor="let ingredientCtrl of getControls(); let i = index"

由于 TS 的工作方式和 Angular 解析您的模板的方式，需要进行此调整（它不理解 TS）。

【讨论】：

也许在以后的 Angular 版本中你必须使用return (this.recipeForm.get('controlName') as FormArray).controls;

【参考方案3】：

将myForm.get('addresses').controls 更改为myForm.get('addresses').value 也可以解决此问题。

【参考方案4】：

作为@sunny kashyap 解决方案的更新，我会这样写：

getControls() 
  return (this.recipeForm.get('controlName') as FormArray).controls;

【参考方案5】：

对于验证错误使用...

<span *ngIf="f.YOUR_FORM_KEY.controls.YOUR_FORM_KEY.errors?.YOUR_FORM_VALIDATION">YOUR_FORM_KEY is YOUR_FORM_VALIDATION</span>

例如。

<span *ngIf="f.name.controls.name.errors?.required">Name is required</span>

ts 文件

get f(): any 
    return this.userForm.controls;

【参考方案6】：

要获得 FormArray 的长度，只需使用 length ：

<span *ngIf="myForm.controls['addresses'].length > 1" (click)="removeAddress(i)">Remove</span>

希望对你有帮助

【讨论】：

谢谢。但它不能解决问题。

是的@mohammed，请检查有问题的更新代码

你可以试试这个let address of myForm.controls.addresses.controls而不是let address of myForm.get('addresses').controls

【参考方案7】：

可以使用自定义界面

// Define AbstractFormGroup
export interface AbstractFormGroup extends FormGroup 
  controls: 
    [key: string]: AbstractFormGroup & AbstractFormGroup[] & AbstractControl & FormGroup & FormArray,
  


// Usage example
class ... 
  myForm: AbstractFormGroup
  ...
  this.myForm = this.fb.group(...) as AbstractFormGroup