I am facing an issue that I can't seem to resolve.
I would like the 'dialogTitle' variable to display the startHour and startMinute variables along with the title variable. However, I keep getting the title and 'undefined' repeated after the title. What steps should I take?
event-form.component.ts
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { MatColors } from '@fuse/mat-colors';
import { CalendarEvent } from 'angular-calendar';
import { CalendarEventModel } from '../event.model';
import { locale as eventFormEnglish } from './i18n/en';
import { locale as eventFormDutch } from './i18n/nl';
import { FuseCalendarComponent } from '../calendar.component';
@Component({
selector : 'fuse-calendar-event-form-dialog',
templateUrl : './event-form.component.html',
styleUrls : ['./event-form.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FuseCalendarEventFormDialogComponent
{
event: CalendarEvent;
dialogTitle: string;
eventForm: FormGroup;
action: string;
startHour: string;
startMinute: string;
endHour: string;
endMinute: string;
presetColors = MatColors.presets;
//Shows dropdown items
startTimeHours = [
{value: 'time-0', viewValue: '7'},
{value: 'time-1', viewValue: '8'},
{value: 'time-2', viewValue: '9'},
{value: 'time-3', viewValue: '10'},
{value: 'time-4', viewValue: '11'},
{value: 'time-5', viewValue: '12'},
{value: 'time-6', viewValue: '13'},
{value: 'time-7', viewValue: '14'},
{value: 'time-8', viewValue: '15'},
{value: 'time-9', viewValue: '16'},
{value: 'time-10', viewValue: '17'},
{value: 'time-11', viewValue: '18'},
{value: 'time-12', viewValue: '19'},
{value: 'time-13', viewValue: '20'},
{value: 'time-14', viewValue: '21'},
{value: 'time-15', viewValue: '22'},
{value: 'time-16', viewValue: '23'}
];
// More code...
event-form.component.html
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">{{dialogTitle}}</span>
<button mat-button class="mat-icon-button"
(click)="dialogRef.close()"
aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</div>
</mat-toolbar>
<div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
<form name="eventForm" [formGroup]="eventForm" class="event-form w-100-p" fxLayout="column" fxFlex>
<mat-form-field class="w-100-p">
<input matInput
name="title"
formControlName="title"
[placeholder]="'FORM.TITLE' | translate"
required>
</mat-form-field>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row">
<!-- More HTML code -->
</div>
<div fxFlex="1 0 auto" fxLayout="column" fxLayout.gt-xs="row">
<!-- More HTML code -->
</div>
<mat-form-field formGroupName="meta" class="w-100-p">
<input matInput
name="location"
formControlName="location"
[placeholder]="'FORM.LOCATION' | translate">
</mat-form-field>
<mat-form-field formGroupName="meta" class="w-100-p">
<textarea matInput
formControlName="notes"
[placeholder]="'FORM.NOTES' | translate"
mat-maxlength="250"
max-rows="4">
</textarea>
</mat-form-field>
</form>
</div>
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<!-- More HTML code -->
</div>
</div>
It appears that the issue might be related to how the two variables are being declared or accessed. It could also be a matter of order in the code. Have you considered checking the database entries for the startHour and startMinute variables? They are expected to be fetched from the database but need to be handled properly. The database is referenced in another file:
calendar.component.ts
// Code related to calendar functionality
If you require further assistance or clarification, feel free to ask! Thank you.