0

I am new to Angular. When I try to send props from parent component to the child component. I am getting the below error. My angular version is 14.2.5.

core.mjs:7635 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '[currentName]?' is not a valid attribute name. Error: Failed to execute 'setAttribute' on 'Element': '[currentName]?' is not a valid attribute name.

enter image description here

Parent component:

<div class="content-box">
  <h2>Edit Listing</h2>
  <div>
    <app-listing-data-form
      [currentName]?="listing?.name"
      [currentDescription]?="listing?.description"
      [currentPrice]?="listing?.price"
      buttonText="Save Changes"
      (onSubmit)="onSubmit()"
    >
    </app-listing-data-form>
  </div>
</div>

Child Component TS file :

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { Listing } from '../types';
@Component({
  selector: 'app-listing-data-form',
  templateUrl: './listing-data-form.component.html',
  styleUrls: ['./listing-data-form.component.css'],
})
export class ListingDataFormComponent implements OnInit {
  name: string = '';
  description: string = '';
  price: string = '';

  @Input() buttonText;
  @Input() currentName = '';
  @Input() currentDescription = '';
  @Input() currentPrice = '';

  @Output() onSubmit = new EventEmitter<Listing>();
  constructor(private router: Router) {}

  ngOnInit(): void {
    console.log('Check here');
    this.name = this.currentName;
    this.description = this.currentDescription;
    this.price = this.currentPrice;
  }

  onButtonClicked(): void {
    this.onSubmit.emit({
      id: '0',
      name: this.name,
      description: this.description,
      price: Number(this.price),
    });
    this.router.navigateByUrl('/my-listings');
  }
}

Please help me fix this issue.

Thanks in advance.

Sujith Sandeep
  • 1,185
  • 6
  • 20
  • 4
    please remove the ? from [currentName]?, [currentDescription]?, [currentPrice]? – cfprabhu Oct 14 '22 at 04:19
  • @cfprabhu Tried... It's not working.. – Sujith Sandeep Oct 14 '22 at 04:22
  • What do you mean "not working" you need to provide more context. Removing the "?" should fix your issues. If there's another error provide the context of it. We can't help you if you say "it doesn't work" be more specific. – penleychan Oct 14 '22 at 04:37
  • Getting `Error: src/app/edit-listing-page/edit-listing-page.component.html:7:8 - error TS2322: Type 'number | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. 7 [currentPrice]="listing?.price"` error If I remove `?` – Sujith Sandeep Oct 14 '22 at 04:47
  • @penleychan The error message is available in the question itself. Kindly check. – Sujith Sandeep Oct 14 '22 at 04:48
  • That's because your `@Input` for currentPrice is expecting a string but you provided a value that is a type of `number | undefined` (listing.price). Don't initialize it an empty string `= ''` give it a proper type. – penleychan Oct 14 '22 at 05:04
  • Done... But now I am getting `error TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. 5 [currentName]="listing?.name"`. The currentName is in `string` only but still getting this error. – Sujith Sandeep Oct 14 '22 at 05:25

1 Answers1

0

as mentioned in the comment you need to remove the ? from [currentName]?, [currentDescription]? and [currentPrice]?

second, you don't need

name: string = '';
description: string = '';
price: string = '';

you can just use currentName, currentDescription and currentPrice

third, looks like listing?.price is a number so define currentPrice as a number or convert it to a string

if you have problems with types you should check what you are providing and what is expected and then fix it accordingly. as a quick solution (bad practice) you can also add as string and your problem will be fixed

Zerotwelve
  • 2,087
  • 1
  • 9
  • 24