2
votes

Angular - TypeError: Impossible de lire la propriété 'jobTitle' de undefined

Je construis une application Angular7 implémentant la validation ReactiveForms Je mets mes messages de validation et leur contrôle d'affichage dans component.ts

create-job.component.ts

<div class="row" [formGroup]="jobForm">
<div class="form-group"
[ngClass]="{'has-error': jobForm.get('jobTitle').errors && (jobForm.get('jobTitle').touched || jobForm.get('jobTitle').dirty)  }">
<input type="text" class="form-control" formControlName="jobTitle" />

 <span class="help-block" *ngIf="formError">
  {{ formError.jobTitle }}
</span>

create-job.component.html

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

@Component({
 selector: 'app-create-job',
 templateUrl: './create-job.component.html',
 styleUrls: ['./create-job.component.css']
})

export class CreateJobComponent implements OnInit {

constructor(private fb: FormBuilder) { }

jobForm = this.fb.group({
 jobTitle: ['', Validators.required]
});

formError: {
'jobTitle': ''
};
validationMessages = {
 jobTitle: {
  required: 'Job Title required'
}};


ngOnInit() {
 this.jobForm.valueChanges.subscribe((data) => {
  this.logValidationError(this.jobForm);
 });}


logValidationError(group: FormGroup): void {
Object.keys(group.controls).forEach((key: string) => {
  const abstractControl = group.get(key);
  if (abstractControl instanceof FormGroup) {
    this.logValidationError(abstractControl);
  } else {
    if (abstractControl && !abstractControl.valid) {
      const messages = this.validationMessages[key];
      console.log(messages);
      console.log(abstractControl.errors);
      for (const errorkey in abstractControl.errors) {
        if (errorkey) {
          this.formError[key] += messages[errorkey] + ' ';
        }
      }
    }
  }});}}


interface IJob {
jobTitle: string;
jobDesc: string;
}

Créer

Mais cela génère l'erreur ci-dessous.

Comment se débarrasser de cette erreur et afficher le message d'erreur de validation?

Merci!

angular angular-reactive-forms angular7 angular-validation angular4-forms

0 commentaires

4 Réponses :

0
votes

<span class="help-block" *ngIf="formError">
   {{ jobForm.jobTitle }}
</span>

1 commentaires

Bien que ce code puisse résoudre la question, y compris une explication de comment et pourquoi cela résout le problème aiderait vraiment à améliorer la qualité de votre message, et entraînerait probablement plus de votes à la hausse. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir, pas seulement à la personne qui la pose maintenant. Veuillez modifier votre réponse pour ajouter des explications et donner une indication des limites et des hypothèses applicables.

0
votes

logValidationError = (group: FormGroup) => {

0 commentaires

0
votes

Essayez getter.

this.jobForm = this.fb.group({
 jobTitle: ['', Validators.required]
});

cette partie doit être dans le cycle ngOnInit

jobForm : FormGroup ;

get jobTitle() { return this.jobForm.get( 'jobTitle' ); }

0 commentaires

0
votes

Voici comment j'ai résolu le problème.

Cause: formError n'était pas initialisé et pendant l'accès à formError [key], il lançait l'erreur.

Correction: Déplacement du jobForm & formError dans ngOnInit

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


export class CreateJobComponent implements OnInit {

constructor(private fb: FormBuilder) { }

 jobForm: FormGroup;
 formError: any;
 validationMessages = {
 jobTitle: {
  required: 'Job Title required'
}};


ngOnInit() {
 this.jobForm = this.fb.group({
  jobTitle: ['', Validators.required]
});
 this.formError = {
  jobTitle: ''
};
this.jobForm.valueChanges.subscribe((data) => {
  this.logValidationError(this.jobForm);
});}



 logValidationError = (group: FormGroup): void => {
  this.formError = {
  jobTitle: ''
 };
 Object.keys(group.controls).forEach((key: string) => {
  const abstractControl = group.get(key);
  if (abstractControl instanceof FormGroup) {
    this.logValidationError(abstractControl);
  } else {
    if (abstractControl && !abstractControl.valid) {
      const messages = this.validationMessages[key];

      for (const errorkey in abstractControl.errors) {
        if (errorkey) {
          console.log(this.formError);
          this.formError[key] += messages[errorkey] + ' ';
        }
      }
    }
   }});}}

0 commentaires