web-dev-qa-db-fra.com

La propriété 'contrôles' n'existe pas sur le type 'AbstractControl' - angular4

de nombreux blogs ont déjà été publiés pour cette erreur, mais aucun n'est spécifié pour angular4.

J'ajoute et supprime des contrôles dynamiques sur le formulaire

ajouter des contrôles au formulaire lors de l'initialisation

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}$')]],
    });
  }

ajouter plus de contrôle en appelant cette méthode

 addPolicyTemplate() {
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.Push(this.initPolicyTemplate());
  }

supprimer les contrôles du formulaire

  removePolicyTemplate(i: number) {  
    const control = <FormArray>this.lienHolder.controls['policyDetails'];
    control.removeAt(i);
  }

mais quand je construis le code je reçois une erreur comme celle-ci

 enter image description here

c'est mon 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>

Je ne suis pas capable de résoudre ce problème. j'ai suivi this blog pour trouver le contrôle dynamique

UPDATE 1

quand j'ai changé mon code .ts comme ça

get DynamicFormControls() {

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

et le code HTML comme ça

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

cela fonctionnait, et j’ai pu compiler le fichier en mode production en utilisant la commande

ng build --target = production --environment = prod

mais depuis quelques jours, je suis confronté à la même erreur et je ne peux pas le compiler en mode production, je n'ai mis à jour aucune de mes applications.

version du noeud - v6.11.1

npm version - 3.10.10

version angulaire - 4.0

je ne sais pas ce qui cause l'erreur.

angularangular4-forms
6
Lijin Durairaj

Après avoir fouillé en profondeur, trouvé la solution ici . Lorsque vous effectuez la construction de la production, vous devez résoudre le problème en réglant le problème de la méthode get de votre composant:

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

et ensuite dans votre modèle:

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

J'espère que cela fonctionne pour toi

12
Vikhyath Maiya

Moi aussi j'ai fait face au même problème sur ng build mais simplement corrigé avec [], 

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

utilisez la ligne ci-dessus au lieu de la ligne ci-dessous 

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

Oui, c’est un bogue étrange bien que la classe FormGroup contienne un fichier nommé controls
Mais vous pouvez essayer ceci:
Dans une boucle:
<div *ngFor="let _policy of formData['controls'] ; let i=index">

Lorsque vous souhaitez obtenir un contrôle spécifique: 

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

Les crochets [] et les guillemets simples ['controls'] dans ce cas devraient résoudre le problème. Aussi, lorsque vous devez parcourir plus de 2 fois controls. Voici une bonne réponse à ce genre de sujet: Accès aux propriétés JavaScript: notation par points vs crochets? .

Cela ne fonctionnait pas pour moi:

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

le changer pour:

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

supprimé l'erreur.

La notation entre crochets permet d'accéder aux propriétés contenant des caractères spéciaux et de sélectionner des propriétés à l'aide de variables

1
k.vincent