Question

我正在使用Angular的2个反应形式＆＃34; Form Array的属性＆＃34;在＆＃39; +＆＃39;中制作div中元素的副本按钮单击，然后删除该div表格＆＃39; - ＆＃39;。按钮克隆工作正常，但是当我克隆时，它会破坏选择2而选择2不会以原始形式克隆。

以下是组件代码：

import { Component, OnChanges, AfterViewInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup} from '@angular/forms';

import { ProductPrice, OrderProduct } from './product-price-model';
declare var $:any;
@Component({
  selector: 'app-order-product',
  templateUrl: './order-product.component.html',
  styleUrls: ['./order-product.component.css']
})
export class OrderProductComponent implements OnChanges,AfterViewInit {

myNav = 'Home';
secondNav = 'Product';
thirdNav = 'Order Products';
isThird = 'true';

OrderProductForm: FormGroup;
OrderProd : OrderProduct;

ngOnInit() {

}

ngAfterViewInit() {
    $('.select-search').select2();
}

constructor(private fb: FormBuilder){
    this.createForm();
}

createForm() {
    this.OrderProductForm = this.fb.group({
        // Vendor: '',
        // OrderDateTime: '',
        // DeliveryDate: '',
        productPriceDiv: this.fb.array([]),
    });
    this.productPriceDiv.push(this.fb.group(new ProductPrice()));
}

ngOnChanges(){
    this.setProductPrice(this.OrderProd.ProPrice);
    alert("asd");
}

get productPriceDiv(): FormArray {
    return this.OrderProductForm.get('productPriceDiv') as FormArray;
};

setProductPrice(ProdPrice: ProductPrice[]) {
    const PpFGs = ProdPrice.map(product_price => this.fb.group(product_price));
    const PpFormArray = this.fb.array(PpFGs);
    this.OrderProductForm.setControl('productPriceDiv', PpFormArray);
}

addProductPriceDiv() {
    this.productPriceDiv.push(this.fb.group(new ProductPrice()));
}

removeProductPriceDiv(index) {
    this.productPriceDiv.controls.splice(index, 1);
}
}

以下是HTML：

 <form  [formGroup]="OrderProductForm" (ngSubmit)="onSubmit()">
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-12">
                        <fieldset class="text-semibold">
                          <legend><i class="icon-reading position-left"></i> General</legend>
                          <div class="row">
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Select Vendor </label>
                                <select class="select-search">
                                  <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="WY">Wyoming</option>
                                  </optgroup>
                                  <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                  </optgroup>
                                  <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="FL">Florida</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="WV">West Virginia</option>
                                  </optgroup>
                                </select>
                              </div>

                            </div>

                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Order DateTime</label>
                                <div class="input-group">
                                  <span class="input-group-addon"><i class="icon-calendar3"></i></span>
                                  <input type="text" class="form-control"  id="anytime-both" value="June 4th 08:47">
                                </div>
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="form-group">
                                <label>Delivery Date</label>
                                <div class="input-group">
                                  <span class="input-group-addon"><i class="icon-calendar22"></i></span>
                                  <input type="text" class="form-control daterange-single" value="03/18/2013">
                                </div>
                              </div>
                            </div>


                          </div>



                        </fieldset>
                      </div>

                      <div formArrayName="productPriceDiv" class="col-md-12">
                          <fieldset>
                          <legend class="text-semibold"><i class="icon-truck position-left"></i> Product details</legend>
                          <div *ngFor="let product_price of productPriceDiv.controls; let i=index" [formGroupName]="i" class="row">
                              <div class="col-md-4">
                                <div class="form-group">
                                  <label>Product</label>
                                  <select class="select-search" formControlName="Product">
                                    <optgroup label="Mountain Time Zone">
                                      <option value="AZ">Arizona</option>
                                      <option value="CO">Colorado</option>
                                      <option value="ID">Idaho</option>
                                      <option value="WY">Wyoming</option>
                                    </optgroup>
                                    <optgroup label="Central Time Zone">
                                      <option value="AL">Alabama</option>
                                      <option value="IA">Iowa</option>
                                      <option value="KS">Kansas</option>
                                      <option value="KY">Kentucky</option>
                                    </optgroup>
                                    <optgroup label="Eastern Time Zone">
                                      <option value="CT">Connecticut</option>
                                      <option value="FL">Florida</option>
                                      <option value="MA">Massachusetts</option>
                                      <option value="WV">West Virginia</option>
                                    </optgroup>
                                  </select>
                                </div>
                              </div>

                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Unit Cost</label>
                                  <input type="text" class="form-control"  formControlName="UnitCost" readonly>
                                </div>
                              </div>

                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Quantity</label>
                                  <input type="text" class="form-control" formControlName="Quantity" >
                                </div>
                              </div>

                              <div class="col-md-2">
                                <div class="form-group">
                                  <label>Cost:</label>
                                  <input type="text" class="form-control" formControlName="Cost" >
                                </div>
                              </div>

                              <div class="col-md-2">
                                <label></label>
                                <div class="form-group">
                                  <button type="button" (click)="addProductPriceDiv()"  class="btn border-success text-success btn-flat btn-rounded btn-icon btn-xs"><i class="icon-add" ></i></button> 
                                  <button type="button" (click)="removeProductPriceDiv(i)" class="btn border-success text-success btn-flat btn-rounded btn-icon btn-xs"><i class="icon-dash" ></i></button> 
                                </div>
                              </div>

                            </div>
                          </fieldset>
                        </div>
                    </div>

                    <div class="text-right">
                      <button type="submit" class="btn btn-primary">Submit form <i class="icon-arrow-right14 position-right"></i></button>
                    </div>
                  </div>
                </form>

Answer 1

以这种方式尝试方法，希望您的问题得到解决

  addProductPrice() {
        return this._fb.group({
            Product: [''],
            UnitCost: [''],
            Quantity: [''],
            Cost: ['']
        });
    };

  createForm() {
      this.OrderProductForm = this._fb.group({
                ProductPrice: this._fb.array([
                     this.addProductPrice()
                ])
      });
  }

  addProductPriceDiv() {
      const control = <FormArray>this.OrderProductForm.controls['productPriceDiv'];
      control.push(this.addProductPrice());
  }

  removeProductPriceDiv(index) {
        const control = <FormArray>this.OrderProductForm.controls['productPriceDiv'];
        control.removeAt(index);
  };

以角度2克隆div，选择2不能正常工作

1 个答案: