如何使用来自服务器的实时数据构建表单（使用 Angular 反应式 forms - 表单构建器）

Question

I spend the last 2 days trying different ways to get the data in the right order but I just couldn't, basically I get some data from the server and display it for the client plus some extra fields which the client need to fill out.

This is my data

formConfiguration = { // it's dynamic !! coming back from the server!
    dateSupply: {
        name: "dateSupply",
        validators: [
            Validators.required,
        ]
    },    
    products: [
        { 
            name: "product_1",
            costPerUnit: 3,
            quantityPerCarton: 10,
            value: 0,
            validators: [
                Validators.required,
            ]
        },
        { 
            name: "product_2",
            costPerUnit: 4,
            quantityPerCarton: 20,
            value: 0,
            validators: [
                Validators.required,
            ]
        }
    ],
}

this is what I did

createOrderForm(products) {

    const group = this.formBuilder.group({});

    for (let i = 0; i < products.length; i++) {

        const control = this.fb.control(products[i].value, products[i].validators || []);
        group.addControl(products[i].name, control);
    };

    return group;

};

this is what I need..

form structure:
       controls:
           dateSupply: FormControl,
           products: FormArray,
               0 : FormGroup
                   controls:
                       name: FormControl
                       costPerUnit: FormControl
                       ...
               1 : FormGroup
                   controls:
                       name: FormControl
                       costPerUnit: FormControl
                       ...

please help..

Answer 1

You must use FormArray. I made an example on stackblitz

this.form = this._fb.group({
  dateSupply: this._fb.control(formConfiguration.dateSupply.name),
  products: this._fb.array(
    formConfiguration.products.map(({ value, validators }) =>
      this._fb.group({
        name: this._fb.control(value, validators || [])
      }),
    ),
  ),
});