Как создать форму (используя Angular реактивные формы - построитель форм) с живыми данными, поступающими с сервера

Question

Последние 2 дня я трачу на разные способы получения данных в правильном порядке, но просто не могу, в основном я получаю некоторые данные с сервера и отображаю их для клиента, а также некоторые дополнительные поля, которые нужны клиенту. заполните.

Это мои данные

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

это то, что я сделал

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;

};

это то, что мне нужно ..

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

пожалуйста, помогите ..

Answer 1

Вы должны использовать FormArray. Я сделал пример на 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 || [])
      }),
    ),
  ),
});