如何创建angular2嵌套数据项

我需要一些关于angular2嵌套反应式表单生成器的帮助

我正在尝试创建一个带有细节嵌套表单数据输入屏幕的master和detail；如下所示：-

{
    "docNo": "abc0001",
    "transactionsDate": "01/01/2017",
    "storeId": "abcd",
    "invoiceDispatchDate": "01/01/2017",
    "deliveryAddress": "abc street, abc qtrs..",
    "purchaseDetail": [
        {
            "modelName": "abc leather",
            "price": "70$",
            "quantityDetail": [
                {
                    "colorDetail": [
                        {
                            "colorName": "Black",
                            "quantity": [
                                {
                                    "sizeNo": "11",
                                    "quantity": 12
                                },
                                {
                                    "sizeNo": "12",
                                    "quantity": 10
                                },
                                {
                                    "sizeNo": "10.5",
                                    "quantity": 200
                                }
                            ]
                        },
                        {
                            "colorName": "Red",
                            "quantity": [
                                {
                                    "sizeNo": "11.5",
                                    "quantity": 120
                                },
                                {
                                    "sizeNo": "11",
                                    "quantity": 50
                                },
                                {
                                    "sizeNo": "12",
                                    "quantity": 20
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

你能帮忙吗

致以最良好的祝愿，

---

Nelly

您可以使用嵌套的FormGroups来完成它

export class YourClassName{
     yourFormName: FormGroup;
     constructor(private formBuilder: FormBuilder){
          //
     }
     createForm(){
          this.yourformName = this.formBuilder.group({
               //...
               deliveryAddress: new FormControl(null),
               purchaseDetail: this.formBuilder.group({
                    //...
                    price: new FormControl(null),
                    quantityDetail: this.formBuilder.group({
                         colorDetail: new FormArray([
                              this.formBuilder.group({
                                   colorName: new FormControl(null),
                                   quantity: new FormArray([
                                        //...
                                   ])
                              }),
                              //...
                         ])
                    })
               })
          });
     }
}

html格式

<form [formGroup]="yourFormName" (ngSubmit)="yourSubmitMethod(yourFormName.value)">
    <!--other inputs-->
    <input formControlName="deliveryAddress" />
    <div formGroupName="purchaseDetail">
        <!--other inputs-->
        <input formControlName="price" />
        <!--other formGroups and inputs-->
    </div>
</form>

有关更多信息，请参阅以下内容：

---

这是@ClaytonK的示例，问题是在“quantity[]”数组上创建输入，即“purchaseDetail.quantityDetail.colorDetail.quantity”，您可以使用

FormArray

，请查看。我会在适当的时候更新我的答案