Angular: Align types among AbstractControls and classes

I tried but could not figure out how I could define and align types. For example,

export interface IDumpingFormSchema {
requestNumber: string | null;
employeeId: string | null;
employeeName: string | null;
department: string | null;
companyCode: string | null;
brand: string | null;
lineItems: DumpingFormItem[] | null;
}


In my class, I can ensure the property implementations by implementing the IDumpingFormSchema:

export class DumpingFormData implements IDumpingFormSchema {}


However, in terms of FormControl, FormArray, and FormGroup, I wanted to ensure properties are defined and aligned. For now, I defined the type manually,

// should follow the schema's properties
export type IDumpingFormGroup = {
requestNumber: FormControl<string | null>;
employeeId: FormControl<string | null>;
employeeName: FormControl<string | null>;
department: FormControl<string | null>;
companyCode: FormControl<string | null>;
brand: FormControl<string | null>;
lineItems: FormArray<FormControl<DumpingFormItem | null>>;
}


And in service, I can implement and ensure the return FormGroup align with the the IDumpingDroup.

createDumpingApplicationFormGroup(): FormGroup<IDumpingFormGroup> {
return this.fb.group({
requestNumber: this.fb.control<string | null>(null),
employeeId: this.fb.control<string | null>(null),
employeeName: this.fb.control<string | null>(null),
department: this.fb.control<string | null>(null),
companyCode: this.fb.control<string | null>(null),
brand: this.fb.control<string | null>(null),
lineItems: this.fb.array([] as FormControl<DumpingFormItem | null>[]),
});
}


How can I dynamically use the IDumpingFormSchema and generate the IDumpingFormGroup type? Is there a way to do it such as DTO or DAO? Thanks.

Continue reading...