web-dev-qa-db-fra.com

Impossible de créer la propriété «validateur» sur la chaîne

J'essaie de créer un Angular 5 forme réactive imbriquée.

J'ai commencé par créer un formulaire plat, qui a fonctionné comme prévu, mais dès que j'extrais une partie de mon formulaire et le place en tant que composant enfant, j'obtiens une erreur

ERREUR TypeError: impossible de créer la propriété 'validateur' sur la chaîne 'addressFormGroup'

Si je commence juste à taper une autre erreur s'affiche alors dans la console

ERREUR TypeError: this.form.get n'est pas une fonction

Qu'est-ce que je fais mal? J'ai lu plusieurs discussions et tutoriels pour essayer de résoudre ce problème, mais je pense qu'il me manque quelque chose d'évident.

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Address } from '../Property';

@Component({
moduleId: module.id,
selector: 'app-property-form',
templateUrl: './property-form.component.html',
styleUrls: ['./property-form.component.css']
})
export class PropertyFormComponent implements OnInit {

propertyForm: FormGroup;

constructor(private _formBuilder: FormBuilder) {}

ngOnInit() {
    this.createForm();
}

createForm() {
    this.propertyForm = this._formBuilder.group({
        saleOrLet: ['Sales', Validators.required],
        addressFormGroup: this.initAddress()
    })
}

initAddress() {
    return this._formBuilder.group({
        houseNameNumber: '',
        address2: '',
        postCode1: '',
        postCode2: ''
    })
}
}

Formulaire de travail

<form [formGroup]="propertyForm" novalidate>
<fieldset>
<legend>Address</legend>
<div formGroupName="addressFormGroup">
  <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>
</fieldset>
</form>

Forme cassée (lorsqu'elle est divisée en format enfant parent)

Parent

<form [formGroup]="propertyForm" novalidate>
  <fieldset>
    <legend>Address 2</legend>
    <app-property-form-address group="addressFormGroup"></app-property-form-address>
  </fieldset>
</form>

Enfant

<div [formGroup]="group">
 <div class="form-group">
    <label>
      House Name Or Number:
      <input placeholder="15 Nursery ave" formControlName="houseNameNumber">
    </label>
  </div>
  ...other inputs follow the same pattern...
</div>

Composant enfant

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
   selector: 'app-property-form-address',
   templateUrl: './property-form-address.component.html',
})
export class PropertyFormAddressComponent {
    @Input() group: FormGroup;
}
angularangular5angular-forms
5
tony09uk

Vous passez le nom du groupe de formulaires sous forme de chaîne plutôt que de référence au formGroup et essayez de le transtyper en tant que FormGroup (group="addressFormGroup"). group="addressFormGroup" ne transmet pas l'objet formGroup, il transmet une chaîne avec la valeur de addressFormGroup.

11
Nikola Jankovic

J'ai eu un même problème et je passais form objet/variable comme formGroup="form" mais la bonne façon est de définir le [] autour de formGroup comme [formGroup]="form".

Voir l'exemple ci-dessous:

<form [formGroup]="form">
    // form-controls
</form>
4
WasiF