core.mjs:6461 ERROR TypeError: Cannot set properties of undefined (setting 'tags')

Viewed 23

I am Stuck at this error and not able to figure out where I am going wrong.Can anyone please help me. I am beginner in angular.Api only accept tags in array form. I am trying to first convert it into an array and then assign it to createIssue object but it is giving me this error.core.mjs:6461 ERROR TypeError: Cannot set properties of undefined (setting 'tags').

create-Issue.Component.ts

export class CreateIssueComponent implements OnInit {

  projectdata!:Project[];
  createIssue!:Issue;

  constructor(private apiService:ApiService) { }

  createIssueForm = new FormGroup ({
      summary: new FormControl('',Validators.required),
      type: new FormControl(''),
      projectID: new FormControl(''),
      priority:new FormControl(''),
      description: new FormControl(''),
      assignee: new FormControl(''),
      tags:new FormControl(''),
      sprint:new FormControl(''),
      storypoint: new FormControl('')
  })
  
  ngOnInit(): void {
    this.getProject();
  }

  AddIssue(){
      console.log(this.createIssueForm.value);
      console.log(this.createIssueForm.value.tags.split(','));
      this.createIssue.tags = Array(this.createIssueForm.value.tags.split(','));
      console.log(this.createIssue.tags); 
      this.createIssue.status = "1";
      this.createIssue.summary = this.createIssueForm.value.summary;
      this.createIssue.priority = this.createIssueForm.value.priority;
      this.createIssue.description = this.createIssueForm.value.description;
      this.createIssue.sprint = this.createIssueForm.value.sprint;
      this.createIssue.storypoint = this.createIssueForm.value.storypoint;
      this.createIssue.type = this.createIssueForm.value.type;
      this.createIssue.assignee = this.createIssueForm.value.assignee;
      this.createIssue.projectID = this.createIssueForm.value.projectID;

      console.log(this.createIssue);
      this.apiService.createIssue(this.createIssue)
      .subscribe(
          response=>{
            console.log(response);
            alert("Issue Created");         
        });
  }

create-Issue.model.ts

export class Issue {
    summary!:string;
    type!:string;
    projectID!:string;
    description!:string;
    priority!:string;
    assignee!:string;
    sprint!:string;
    storypoint!:string;
    status!:string;
    tags!:any;
}
1 Answers

Change it to below. The property createIssue is undefined during initialization and cannot have values assigned before intiailizing, so we need to initialize it with {} I have also changed the model so that all the properties are optional using ?:

export class CreateIssueComponent implements OnInit {

  projectdata!:Project[];
  createIssue!:Issue;

  constructor(private apiService:ApiService) { }

  createIssueForm = new FormGroup ({
      summary: new FormControl('',Validators.required),
      type: new FormControl(''),
      projectID: new FormControl(''),
      priority:new FormControl(''),
      description: new FormControl(''),
      assignee: new FormControl(''),
      tags:new FormControl(''),
      sprint:new FormControl(''),
      storypoint: new FormControl('')
  })
  
  ngOnInit(): void {
    this.getProject();
  }

  AddIssue(){
      console.log(this.createIssueForm.value);
      console.log(this.createIssueForm.value.tags.split(','));
      this.createIssue = {}; //                       <- changed here
      this.createIssue.tags = Array(this.createIssueForm.value.tags.split(','));
      console.log(this.createIssue.tags); 
      this.createIssue.status = "1";
      this.createIssue.summary = this.createIssueForm.value.summary;
      this.createIssue.priority = this.createIssueForm.value.priority;
      this.createIssue.description = this.createIssueForm.value.description;
      this.createIssue.sprint = this.createIssueForm.value.sprint;
      this.createIssue.storypoint = this.createIssueForm.value.storypoint;
      this.createIssue.type = this.createIssueForm.value.type;
      this.createIssue.assignee = this.createIssueForm.value.assignee;
      this.createIssue.projectID = this.createIssueForm.value.projectID;

      console.log(this.createIssue);
      this.apiService.createIssue(this.createIssue)
      .subscribe(
          response=>{
            console.log(response);
            alert("Issue Created");         
        });
  }

create-Issue.model.ts

export class Issue {
    summary?:string;
    type?:string;
    projectID?:string;
    description?:string;
    priority?:string;
    assignee?:string;
    sprint?:string;
    storypoint?:string;
    status?:string;
    tags?:any;
}
Related