Блог

Главная - Вопросы по программированию - Ошибка Angular — TypeError: не удается прочитать свойство ‘JobTitle’ неопределенного

Ошибка Angular — TypeError: не удается прочитать свойство ‘JobTitle’ неопределенного

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

#угловой #angular7 #угловые реактивные формы #angular4-forms #угловая проверка

Вопрос:

Я создаю 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 amp;amp; !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;
}

create-job.component.html

 <div class="row" [formGroup]="jobForm">
<div class="form-group"
[ngClass]="{'has-error': jobForm.get('jobTitle').errors amp;amp; (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>

Создать

Но это приводит к приведенной ниже ошибке.

введите описание изображения здесь

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

Спасибо!

Ответ №1:

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

Комментарии:

1. Хотя этот код может решить вопрос, включение объяснения того, как и почему это решает проблему, действительно помогло бы улучшить качество вашего сообщения и, вероятно, привело бы к большему количеству голосов. Помните, что вы отвечаете на вопрос для читателей в будущем, а не только для того, кто спрашивает сейчас. Пожалуйста, отредактируйте свой ответ, чтобы добавить пояснения и указать, какие ограничения и предположения применяются.

Ответ №2:

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


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

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

 logValidationError = (group: FormGroup) => {

Ответ №3:

Попробуйте getter.

 jobForm : FormGroup ;

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

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

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

Ответ №4:

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

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

Исправлено: перемещена форма задания и 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 amp;amp; !abstractControl.valid) {
      const messages = this.validationMessages[key];

      for (const errorkey in abstractControl.errors) {
        if (errorkey) {
          console.log(this.formError);
          this.formError[key]  = messages[errorkey]   ' ';
        }
      }
    }
   }});}}
Метки: