如何动态更新与 Angular 中特定类关联的表单字段？

Question

我正在 Angular 中开发动态表单，其中表单字段按类别分组，每个组都与特定的类相关联（例如，

Revenue

、

Loyer

、

Epargne

）。我试图弄清楚如何通过调用每种字段类型的特定方法来动态处理这些字段的更新，例如

updateRevenue

、

updateLoyer

或

updateEpargne

。

背景：

我有一个如下所示的表单配置对象：

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
  ],
}

表单字段与特定模型或类相关联：

• 与收入相关领域的收入（例如，Revenus annuels bruts、Revenus Variables annuels 等）
• Loyer 与租金相关的字段（例如 Loyer）
• Epargne 用于与储蓄相关的字段（例如，Épargne actuelle）

我希望能够调用

updateRevenue()

、

updateLoyer()

或

updateEpargne()

等方法来用各自的值更新每组字段。

问题： 我需要弄清楚如何确保提交表单时，通过根据关联的类调用适当的更新方法来更新每个特定的字段组。

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();
  }
}

问题：

• 如何组织和构建我的表单，以便每个字段组调用适当的更新方法（例如 updateRevenue、updateLoyer、updateEpargne）？
• 如何根据用户输入值动态处理字段组的更新？
• 是否可以在提交表单时根据关联的类自动将每个字段与其更新方法关联起来？

Answer 1

我们可以使用

instanceof

来检查类类型并调用关联的方法，至于要自动化什么，您需要提供更多详细信息。

class Wheel {
 type = 'rubber';
}

class Car {
 wheels = 4;
}
const someVariable = new Wheel();
if(someVariable instanceof Wheel) {
  console.log('is wheel call wheel methods');
} else {
  console.log('is car call car methods');
}