angular - 如何创建angular2嵌套数据条目

Question

我需要一些有关 angular2 嵌套反应式表单构建器的帮助。

我正在尝试创建带有详细嵌套表单数据输入屏幕的主控和详细信息；像下面的json：-

{
    "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
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

你能帮忙吗？

最好的问候， 耐莉

Answer 1

您可以使用嵌套的 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>

有关更多信息，还请查看以下内容：

• https://angular.io/docs/ts/latest/guide/reactive-forms.html#!#grouping
• https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
• https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol

这是@ClaytonK的示例https://plnkr.co/edit/cs244r