CODEWITHSUNDEEP
htmlangulartypescriptforms
Kamil Wójcik
Kamil Wójcik

Reputation: 31

Argument of type 'Event' is not assignable to parameter of type

edit-category-component.html:

<app-form-category *ngIf="model" [model]="model"
(onSaveChanges)="saveChanges($event)"></app-form-category>

<mat-spinner *ngIf="!model"></mat-spinner>

edit-category.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { categoryCreationDTO, categoryDTO } from 'src/app/models/category';
import { CategoriesService } from 'src/app/services/categories.service';

@Component({
  selector: 'app-edit-category',
  templateUrl: './edit-category.component.html',
  styleUrls: ['./edit-category.component.scss']
})
export class EditCategoryComponent implements OnInit {

  constructor(
    private activatedRoute: ActivatedRoute,
    private categoriesService: CategoriesService,
    private router: Router
  ) { }

  model!: categoryDTO;

  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params => {
      this.categoriesService.getById(params.id).subscribe(category =>{
        this.model = category;
      })
    });
  }

  saveChanges(categoryCreationDTO: categoryCreationDTO) {
    this.categoriesService.edit(this.model.id, categoryCreationDTO)
    .subscribe(()=>{
      this.router.navigate(["/magazine"])
    })
  }
}

category.ts

export interface categoryCreationDTO{
  name: string;
}

export interface categoryDTO{
  id: number;
  name: string;
}

ERROR

Error: src/app/components/magazine/category/edit-category/edit-category.component.html:2:30

  • error TS2345: Argument of type 'Event' is not assignable to parameter of type 'categoryCreationDTO'. Property 'name' is missing in type 'Event' but required in type 'categoryCreationDTO'.

(onSaveChanges)="saveChanges($event)"> ~~~~~~

src/app/components/magazine/category/edit-category/edit-category.component.ts:8:16 templateUrl: './edit-category.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component EditCategoryComponent.

I don't understand this error, could someone help me?

Upvotes: 1

Views: 5574

Answers (2)

vsnikhilvs
vsnikhilvs

Reputation: 576

Typescript expects the event response as the type you specified, but in reality, it would type Event.

You might want to try what is coming from the event and then assign the needed things into the api call.

Upvotes: 0

Beka Kalandadze
Beka Kalandadze

Reputation: 600

saveChanges method expects object with a type of categoryCreationDto which in itself expects to have name property (as you have defined on the interface from which the argument inherits). As you are passing $event to an saveChanges($event) it doesn't have name on the event property. If you don't know what type of object is event you can console.log() it and after pass down to the method correctly.

I see that you try to use eventEmitter from a child via OnSaveChanges property -> Check out what is sent from the children component to the parent and use it in saveChanges accordingly. The $event object will be exactly that which you output from the children app-form-category via EventEmitter.

Upvotes: 0

Related Questions