Angular - TypeError: Невозможно прочитать свойство 'jobTitle' из неопределенного

Question

Я создаю Angular7 приложение, реализующее ReactiveForms Проверка Я отправляю свои сообщения проверки и управление их отображением в component.ts

Create-job.component.ts

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

создать-job.component.html

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

Создайте

Но это выдает ошибку ниже.

Как избавиться от этой ошибки и отобразить сообщение об ошибке проверки?

Ой!

Answer 1

Вот как я исправил проблему.

Причина: formError не инициализировался и при обращении к formError [ключ] выдавала ошибку.

Исправлено: перемещено jobForm & formErrorвнутри 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] + ' ';
        }
      }
    }
   }});}}

Answer 2

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


logValidationError(group: FormGroup): void {
//...

Поскольку logValidationError не является функцией стрелки, я считаю, что внутри подписчика он не будет иметь доступа к контексту this компонента. Измените объявление на

logValidationError = (group: FormGroup) => {

Answer 3

Попробуйте получить.

jobForm : FormGroup ;

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

эта часть должна быть в цикле ngOnInit

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

Answer 4

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