web-dev-qa-db-fra.com

Form Builder avec hasError () pour la validation renvoie une erreur d'ERREUR TypeError: Impossible de lire la propriété 'hasError' de non défini

Salut, j'implémente un formulaire dans angular 2 using Form Builder

dans component.ts j'ai implémenté mon formulaire en utilisant formGroup

Voici mon code

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_Zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      Zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],
      user_type: ['2', [<any>Validators.required]],
      terms: [0, [<any>Validators.required]],
      hash_tag: [''],

    });

}

Cela fonctionne bien. Mais en venant afficher les validations en frontEnd

J'ai utilisé comme ça

  <div class="form-group row">
    <div class="col-lg-8">
      <label>Address 2</label>
      <textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
      <span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is Required.</span>
    </div>
  </div>

cela fonctionne mais lance l'erreur dans la console comme ci-dessous

ERREUR TypeError: Impossible de lire la propriété 'hasError' d'undefined

Veuillez m'aider à trier cela.

Je vous remercie.

angularangular2-formbuilderangular-reactive-formsangular-validationangular-forms
9
Chinna M

Vous devez l'utiliser comme ceci:

<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
15
monica

Si vous travaillez avec des formulaires réactifs, vous devriez probablement utiliser les getter de TypeScript pour résoudre ce problème, c'est beaucoup plus propre:

Dans un formulaire réactif, vous pouvez toujours accéder à n'importe quel contrôle de formulaire via la méthode get sur son groupe parent, mais il est parfois utile de définir des getters comme raccourcis pour le modèle.

Un getter vous permettra d'accéder directement à un champ de formulaire, en évitant l'utilisation redondante de myForm.controls['fieldNameGoesHere']. Avec ngIf dans les exemples ci-dessus.

Par exemple, pour company_address2, Ajoutez ce qui suit après votre méthode ngOnInit():

get company_address2() { return this.myForm.get( 'company_address2' ); }

Cela donnera à votre composant HTML un accès direct au company_address2, Essayez plutôt:

<textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" 
    formControlName="company_address2">
</textarea>

<span class="help-block form-error text-danger small"
    *ngIf="company_address2.hasError('required')">
    Company Address 2 is Required.
</span>

Cependant, vous aurez la définition de chaque méthode getter individuellement, TypeScript ne permet pas de fournir des variables aux getter, vous finirez par avoir une méthode get pour chaque contrôle de votre formulaire.

Plus d'informations peuvent être trouvées dans les documents Angular sous Validation de formulaire: validateurs intégrés .

2
Kevin Leary

J'ai résolu cela comme ceci:

<span class="help-block form-error text-danger small" 
*ngIf="myForm.controls.company_address2.errors?.required &&
myForm.controls.company_address2.touched">
Company Address 2 is Required </span>
0
Jobaer Khan

J'ai rencontré ce problème dans angular 5 essayez celui ci-dessous, vous obtiendrez une sortie

<mat-error>
<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
</mat-error>
0
Karthi Loks