代码之家 › 专栏 › 技术社区 › Munna Babu

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

angular4-forms angular2-forms typescript angular

116

Munna Babu · 技术社区 · 8 年前

我正在尝试角度4中的嵌套反应形式。它工作得很好,但当我尝试构建AOT时,它会抛出错误

类型“AbstractControl”上不存在“controls”

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

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

下面的typescript代码

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

7 回复 | 直到 8 年前

257

Munna Babu 8 年前

根据@Gnter Zchbauer的评论,首先我改变了

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

然后基于@yuruzi的评论

改变 myForm.get('addresses').controls 到 myForm.get('addresses')['controls']

现在工作正常。谢谢@gunter&俞汝子

ConnorsFan 6 年前

不过,你可以很容易地修复它。将“获取控件”逻辑外包到组件代码的方法中(即 .ts 文件):

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

在模板中,您可以使用:

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

由于TS的工作方式和Angular解析模板的方式,需要进行此调整(它不理解那里的TS)。

Motasem Halawani 7 年前

作为对@sunny kashyap解决方案的更新,我将这样写:

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

Advait Baxi 8 年前

改变 myForm.get('addresses').controls 到 myForm.get('addresses').value 也会解决这个问题。

Mhar Daniel 7 年前

对于验证错误,请使用。。。

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

Mohamed Ali RACHID 8 年前

获取 FormArray length :

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

希望有帮助

Uriy MerkUriy 6 年前

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