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

Question

我正在构建实现​​Angular7的{​​{1}}应用程序我将验证消息及其显示控件全部放在ReactiveForms

create-job.component.ts

component.ts

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

  
  创建

但这会引发以下错误。

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

谢谢！

Answer 1

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

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

这就是我解决问题的方式。

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