Angular 2使用FormBuilder访问2. Level Nested FormArrays

时间:2017-03-22 08:29:59

标签: arrays angular nested formbuilder

使用angular 2 formbuilder我试图将数据插入第二个数组? " modelArray&#34 ;;这是我的ts和html文件的一部分



    createModelArray(): void {
    this.dataFRM = this.fb.group({
      docNo: [null, Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(30)])],
      companyId: [null, Validators.compose([Validators.required])],
      purchaseTypeId: [null, Validators.compose([Validators.required])],
      transactionsDate: [null, Validators.compose([Validators.required])],
      wareHouseId: [null, Validators.compose([Validators.required])],
      storeId: null,
      note: null,
      taxTotal: null,
      discountTotal: null,
      grandTotal: null,
      transportationAmount: null,
      orderNo: null,
      orderedBy: null,
      invoiceDispatchDate: null,
      maturityDate: null,
      deliveryAddress: null,
      status: true,
      userId: CONFIG.userInfo.userId,
      lastModifiedBy: null,
      modelDetail: this.fb.array([
        this.initModelDetail()
      ])
    });
  }

  initModelDetail(): any {
    return this.fb.group({
      modelName: ['', [Validators.required, Validators.minLength(3)]],
      price: ['', [Validators.required]],
      exchange: [''],
      sizeGroup: null,
      modelArray: this.fb.array([
        this.initmodelArray()
      ])
    });
  }

  initmodelArray(): any {
    return this.fb.group({
      colorId: ['', Validators.required],
      sizeId: [],
      price: [],
      qty: [1, Validators.required]
    })
  };

<div class="row">

        <form [formGroup]="dataFRM" class="form-horizontal" autocomplete="off" novalidate>
                <div class="container">
                    <div class="col-xs-12">
                        <div class="margin-20">
                            <h4>SatinAlma Detay</h4>
                        </div>
                        <div class="margin-20">
                            <a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a>
                        </div>
                        <div formArrayName="modelDetail">
                            <div class="panel panel-default" [formGroupName]="i" *ngFor="let project of dataFRM.controls.modelDetail.controls; let i = index">
                                <div class="panel-heading">
                                    <span>Model {{i + 1}}</span>
                                    <span class="glyphicon glyphicon-remove pull-right" (click)="removeModel(i)"></span>
                                 </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="form-group col-xs-3">
                                            <label>Model Adı</label>
                                            <input type="text" class="form-control" formControlName="modelName" placeholder="model adı..">
                                        </div>
                                        <div class="form-group col-xs-3">
                                            <label>Fiyati</label>
                                            <input type="number" class="form-control" formControlName="price" placeholder="fiyat..">
                                        </div>
                                        <div class="form-group col-xs-3">
                                            <label>Doviz</label>
                                            <ng-select formControlName="exchange" [options]="exchangeList" [multiple]="false" [allowClear]="true" placeholder="doviz seçiniz.."></ng-select>
                                        </div>
                                        <div class="form-group col-xs-3">
                                            <label>Beden Seti</label>
                                            <ng-select formControlName="sizeGroup" [options]="sizeGroupList" [multiple]="false" [allowClear]="true" (selected)="getSizeList($event.value)"
                                                placeholder="benden seti seçiniz.."> </ng-select>
                                        </div>
                                    </div>

                                    <br/>
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div formArrayName="modelArray">
                                                <div class="table table-bordered table-hover table-resonsive table-striped">
                                                    <thead>
                                                        <tr>
                                                            <th>Rengı</th>
                                                            <th>Fiyati</th> 
                                                            <th>İşlem</th>
                                                            <th><button class="btn btn-primary" (click)="addColor(project.controls.modelArray.controls)"> Yeni</button></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <div [formGroupName]="x" *ngFor="let detail of project.controls.modelArray.controls; let x = index">
                                                            <tr>
                                                                <td>
                                                                    <ng-select formControlName="colorId" [options]="colorsList" [multiple]="false" [allowClear]="true" placeholder="ürün seçiniz.."></ng-select>
                                                                </td>
                                                                <td>
                                                                    <input type="number" class="form-control" formControlName="price" placeholder="fiyati..">
                                                                </td>
                                                               
                                                                <td class="text-right">
                                                                    <div class="btn-group">
                                                                        <a class="btn btn-danger btn-xs btn-rounded" (click)="removeColor(X)"><i class="fa fa-trash"></i> Sil</a>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </div>
                                                    </tbody>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 

                        <div class="margin-20">
                            <a class="btn btn-default" (click)="addModelInfo()" style="cursor: default"> {{"SYSTEM_CRUD.NEW"|translate}}</a>
                        </div> 
                        <div class="clearfix"></div> 
                    </div>
                </div>
                </form>
            </div>
&#13;
&#13;
&#13; enter link description here 寻找解决方案;我只想尝试访问数组中的数组。

提前致谢。

1 个答案:

答案 0 :(得分:1)

使用var http = require('http'); module.exports = { 'sendResults': function(callback) { http.get(' http://gs-class.com/nodejs/students.php', function(res) { var whole = ''; res.on('data', function(chunk) { whole += chunk; }); res.on('end', function() { callback(whole) }); }); } } 这可以获得数组:

group.get(...)