web-dev-qa-db-fra.com

La propriété 'contrôles' n'existe pas sur le type 'AbstractControl' Angular 4

J'essaie une forme réactive imbriquée dans Angular 4. Cela fonctionne bien, mais lorsque j'essaie de construire AOT, l'erreur est renvoyée. 

'contrôles' n'existe pas sur le type 'AbstractControl'

J'ai googlé et essayé peu de choses mais pas de chance. Quelqu'un pourrait-il me dire comment résoudre ce problème? 

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

Code TypeScript ci-dessous

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);
}
angulartypescriptangular2-formsangular4-forms
8
Munna

D'après les commentaires de @ Günter Zöchbauer, j'ai d'abord changé 

myForm.controls['addresses'] à myForm.get('addresses') à la fois en HTML et en TypeScript 

puis basé sur le commentaire @yuruzi 

changé myForm.get('addresses').controls en myForm.get('addresses')['controls']

Cela fonctionne bien maintenant. Merci @gunter et yuruzi

25
Munna

Vous pouvez le réparer facilement cependant. Externalisez la logique "obtenez les contrôles" dans une méthode de votre code de composant (le fichier .ts):

`getControls() {
  return (<FormArray>this.recipeForm.get('controlName')).controls;
}`

Dans le modèle, vous pouvez ensuite utiliser:

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

Cet ajustement est nécessaire en raison de la manière dont TS fonctionne et Angular analyse vos modèles (il ne comprend pas TS ici).

1
sunny kashyap

pour obtenir la longueur d'une FormArray, utilisez simplement length:

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

J'espère que ça aide

0
Mohamed Ali RACHID

Remplacez myForm.get('addresses').controls par myForm.get('addresses').value corrigera également le problème.

0
Advait Baxi