I have developed a component named CopySchedulefromSiteComponent and now I am looking to import it into another component called SiteScheduleComponent. However, I am unsure of the correct way to do this.
The CopySchedulefromSiteComponent contains one field utilizing Formly
CopySchedulefromSiteComponent
@Component({
selector: 'app-copy-schedule-from-site',
templateUrl: './copy-schedule-from-site.component.html',
styleUrls: ['./copy-schedule-from-site.component.scss'],
})
export class CopyScheduleFromSiteComponent implements OnInit {
showOverwriteWarningModal(): Observable<boolean> {
const deleteRef = this.dialog.open(CopyScheduleModalComponent, {});
return deleteRef.afterClosed();
}
copySiteScheduleControl: FormlyFieldConfig | undefined;
modelLoaded = false;
form = new FormGroup({});
options: FormlyFormOptions = {};
fields: FormlyFieldConfig[] = [
{
fieldGroupClassName: 'row',
fieldGroup: [
{
wrappers: ['form-field'],
className: 'col-6',
key: 'siteScheduleControl',
type: 'select',
templateOptions: {
label: 'Copy Schedule from Site',
options: this.approvedSites,
labelProp: 'text',
},
expressionProperties: {
'templateOptions.disabled': (): boolean => {
return this.siteSubmissionModel.disableControls;
},
},
hooks: {
onInit: (field: FormlyFieldConfig | undefined): void => {
this.copySiteScheduleControl = field;
if (field?.templateOptions?.options) {
field.templateOptions.options = this.approvedSites;
}
},
},
},
],
},
];
I aim to connect/import the formly field from CopySchedulefromSite component to the formly fields in SiteScheduleComponent after importing the component. However, I receive an error stating ''CopyScheduleFromSiteComponent' is declared but its value is never read'. Below are some formly fields included
SiteScheduleComponent
import {CopyScheduleFromSiteComponent} from './copy-schedule-from-
site/copy-schedule-from-site.component';
@Component({
selector: 'app-site-schedule',
templateUrl: './site-schedule.component.html',
styleUrls: ['./site-schedule.component.scss'],
})
export class SiteScheduleComponent implements OnInit, OnChanges {
@Input() siteSubmissionModel: SiteSubmissionModel = new SiteSubmissionModel();
copySiteScheduleControl: FormlyFieldConfig | undefined;
model: SiteScheduleModel = {
siteScheduleControl: undefined,
monthsOfOperation: new CoreApi.MonthsOfOperation(),
daysOfOperation: {days: []},
hoursOfOperation: {days: []},
exception: [],
};
modelLoaded = false;
form = new FormGroup({});
options: FormlyFormOptions = {};
fields: FormlyFieldConfig[] = [
{
fieldGroupClassName: 'row',
fieldGroup: [
{
wrappers: ['form-field'],
className: 'col-6 mt-small',
type: 'button',
templateOptions: {
text: 'Copy',
matIcon: 'file_copy',
onClick: (): void => {
if (this.model.monthsOfOperation && (this.model.monthsOfOperation.fromDate ||
this.model.monthsOfOperation.toDate)) {
this.showOverwriteWarningModal().subscribe((confirmed) => {
if (confirmed) {
this.copySchedule();
}
});
} else {
this.copySchedule();
}
},
},
expressionProperties: {
'templateOptions.disabled': (): boolean => {
return !this.model.siteScheduleControl || this.siteSubmissionModel.disableControls;
},
},
},
],
},
{
template: '<h4>Months of Operation</h4>',
},
{
fieldGroupClassName: 'row',
fieldGroup: [
{
className,
fieldGroup: [
{
key: 'monthsOfOperation',
type: FORMLY_CUSTOM_TYPE_DATE_RANGE_PICKER,
templateOptions: {
fromDate: 'monthsOfOperation.fromDate',
toDate: 'monthsOfOperation.toDate',
required: true,
onDateChange: (): void => this.onMonthsOfOperationChanged(),
},
expressionProperties: {
'templateOptions.disabled': (): boolean => {
return this.siteSubmissionModel.disableControls;
},
},
},
],
},
Please provide guidance on resolving this issue.