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 ^^
2 Answers
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>
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!
