How to dynamically update form fields associated with specific classes in Angular?

I'm working on a dynamic form in Angular where form fields are grouped by category, and each group is associated with a specific class (e.g., Revenue, Loyer, Epargne). I'm trying to figure out how to handle the update of these fields dynamically by calling specific methods for each field type, such as updateRevenue, updateLoyer, or updateEpargne.

Context:


I have a form configuration object like the following:

export interface FormField {
label: string;
type: string;
required: boolean;
options?: string[];
}

export interface FormConfig {
fields: FormField[];
}

disposableIncome: {
fields: [
{ label: 'Revenus annuels bruts', type: 'number', required: true }, // class Revenue
{ label: 'Revenus variables annuels', type: 'number', required: true },// class Revenue
{ label: 'Revenus auto-entrepreneur', type: 'number', required: true },// class Revenue
{ label: 'Revenus fonciers', type: 'number', required: true },// class Revenue
{ label: 'Revenus locatifs', type: 'number', required: true },// class Revenue
{ label: 'Revenus BNC / BIC', type: 'number', required: true },// class Revenue
{ label: 'Loyer', type: 'number', required: true }, // class Loyer
{ label: 'Crédits', type: 'number', required: true },// class Loyer
{ label: 'Reste à vivre', type: 'number', required: true },// class Loyer
{ label: 'Épargne actuelle', type: 'number', required: true }, // class Epargne
],
}


The form fields are associated with specific models or classes:

• Revenue for the fields related to income (e.g., Revenus annuels bruts, Revenus variables annuels, etc.)
• Loyer for the fields related to rent (e.g., Loyer)
• Epargne for the fields related to savings (e.g., Épargne actuelle)

I want to be able to call methods like updateRevenue(), updateLoyer(), or updateEpargne() to update each group of fields with their respective values.

Problem: I need to figure out how to ensure that when the form is submitted, each specific group of fields is updated by calling the appropriate update method, based on the associated class.

class DynamicFormComponent implements OnInit {
formConfigService = inject(FormConfigService);
private modalController = inject(ModalController);

dynamicForm!: FormGroup;
formConfig: FormConfig | undefined;
fb = inject(FormBuilder);

ngOnInit(): void {
const config = this.formConfigService.fetchFormConfig(this.group());
this.formConfig = config;
this.buildForm(config);
}

buildForm(fields: FormConfig): void {
const controls: { [key: string]: any } = {};
fields.fields.forEach((field) => {
const validators = field.required ? [Validators.required] : [];
controls[field.label] = ['', validators];
});
this.dynamicForm = this.fb.group(controls);
}
submitForm() {
console.log(this.dynamicForm.value);
this.modalController.dismiss();
}
}



Questions:

• How can I organize and structure my form so that each field group calls the appropriate update method (e.g., updateRevenue, updateLoyer, updateEpargne)?
• How can I dynamically handle the updating of field groups based on user input values?
• Is it possible to automatically associate each field with its update method when submitting the form, based on the associated classes?

Continue reading...