Angular - TypeError：无法读取未定义的属性“jobTitle”答案

【问题标题】：Angular - TypeError: Cannot read property 'jobTitle' of undefinedAngular - TypeError：无法读取未定义的属性“jobTitle”
【发布时间】：2019-04-17 14:23:50
【问题描述】：

我正在构建一个实现ReactiveForms 验证的Angular7 应用程序我将我的验证消息及其显示控件全部放在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;
}

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

创造

但这会引发以下错误。

如何摆脱此错误并显示验证错误消息？

谢谢！

【问题讨论】：

标签： angular angular7 angular-reactive-forms angular4-forms angular-validation

【解决方案1】：

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

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请编辑您的答案以添加解释并说明适用的限制和假设。

【解决方案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] 时抛出了错误。

修复：在 ngOnInit 中移动了 jobForm 和 formError

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] + ' ';
        }
      }
    }
   }});}}

【讨论】：