CODEWITHSUNDEEP
angulartypescript
Nils
Nils

Reputation: 469

What did i do wrong using ngModel with Angular Material Inputs?

For some reason i cant load data into the input form. There isnt much to explain i guess i am simply overseeing something or doing something wrong.

This is my html:

            <mat-form-field>
                <input matInput [(ngModel)]="name" placeholder="Folienname">
            </mat-form-field>

            <mat-form-field>
                <input matInput type="text" [(ngModel)]="text" placeholder="Nachricht">
            </mat-form-field>

            <mat-form-field>
                <mat-select [(value)]="color" placeholder="Schriftfarbe">
                    <mat-option value="#ffffff">White</mat-option>
                    <mat-option value="#bfbfbf">Lightgrey</mat-option>
                    <mat-option value="#808080">Grey</mat-option>
                </mat-select>
            </mat-form-field>

And this is my ts:

export class SlideEditorComponent implements OnInit {

  slides: Slide[];

  name: string = '';
  text: string = '';
  color: string = "#000000";

  constructor(
    private slideService: SlideService,
    private event: EventService
  ) {
    this.event.subscribe('edit-slide-data', (slide: Slide) => {
      this.updateValues(slide);
    });
  }

  ngOnInit() {
    this.slideService
      .getSlides()
      .subscribe((data: Slide[]) => {
        this.slides = data;
      })
  }

  onSaveSlide() {
    this.slideService.addSlide(
      this.name,
      this.text,
      this.color
    );
    this.name = '';
    this.text = '';
    this.color = "#000000";
  }

  updateValues(slide) {
    this.name = slide.name;
    this.text = slide.text;
    this.color = slide.colour;
  }
}

The "this.event.subscribe" is just a way to communicate between components, i parse the slide data through that service from another component. When I log the data it seems to get parsed but somehow it doesnt appear on the input fields... Hope you guys can help me ^^

Upvotes: 3

Views: 7243

Answers (2)

Nils
Nils

Reputation: 469

There was a problem with Routing to the component and parsing the data at the same time. I can't really explain it because i only partially understand whats happening but this is the fix:

from this:

this.event.publish('edit-slide-data', slide);
this.router.routeByUrl('some route');

to this:

this.router.routeByUrl('some route').then(() => {
this.event.publish('edit-slide-data', slide);
});

Thanks for your time!

Upvotes: 0

Dalorzo
Dalorzo

Reputation: 20014

You need to add a name attribute to the input in order to make it work:

 <input matInput name="someName" [(ngModel)]="name" placeholder="Folienname">

Like

            <mat-form-field>
                <input matInput name="name" [(ngModel)]="name" placeholder="Folienname">
            </mat-form-field>

            <mat-form-field>
                <input matInput name="text" type="text" [(ngModel)]="text" placeholder="Nachricht">
            </mat-form-field>

Upvotes: 6

Related Questions