Javascript 角度6动态行在添加时重置

添加购买html

<div class="d-flex justify-content-center align-items-center">
  <div class="col-md-12 border">
    <div class="card-header header-elements-inline">
      <h4 class="card-title">Add Purchase</h4>
      <button [mat-dialog-close]="true" type="button" class="bootbox-close-button close" data-dismiss="modal"
        aria-hidden="true">×</button>
    </div>

    <form action="" #addPurchaseForm="ngForm" class="purchaseForm" (ngSubmit)="addPurchase(addPurchaseForm)" method="POST">
      <div class="card-body">
        <div class="col-md-12">
          <div class="row justify-content-center">
            <div class="col-md">
                <div class="form-group form-group-float">
                  <label class="form-group-float-label is-visible">Select vendor to add product</label>
                  <ng-select [items]="vendorData"  bindLabel="vendor_name" bindValue="vendor_id" name="vendor_name" #vendor_name="ngModel"
                     [searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails.vendor_id">
                    </ng-select>
                  <span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
                    Vendor
                    is
                    Required</span>
                </div>
            </div>

            <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Reciept No</label>
                <input [(ngModel)]="purchaseDetails.reciept_no" name="reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
                <span *ngIf="addPurchaseForm.submitted && reciept_no.errors?.required" class="form-text text-danger">Product code
                  is
                  Required</span>
              </div>
            </div>

            <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Purchased At</label>
                <mat-form-field>
                <input  [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel"  required class="form-control" matInput [matDatepicker]="picker" placeholder="Choose a date">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <!-- <input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" type="text" required class="form-control"> -->
                <span *ngIf="addPurchaseForm.submitted && purchased_at.errors?.required" class="form-text text-danger">Product code
                  is
                  Required</span>
              </div>
            </div>


          </div>
          <h4 class="card-title">Purchase Details</h4>

          <mat-dialog-content style="max-height:200px">
          <div class="row" *ngFor="let purchaseDetail of purchaseDetails; let i = index;">

            <div class="col-md">
                <div class="form-group form-group-float">
                  <label class="form-group-float-label is-visible">Select Product</label>
                  <ng-select [items]="productData"  bindLabel="product_name" bindValue="product_id" name="vendor_name" #product[i]="ngModel"
                     [searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails[i].product_id">
                  </ng-select>
                  <span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
                    Vendor
                    is
                    Required</span>
                </div>
            </div>

            <div class="col-md">
            <div class="form-group form-group-float">
              <label class="form-group-float-label is-visible">Unit Rate</label>
              <input mask="0*.0*" value="{{purchaseDetails[i].rate}}" [(ngModel)]="purchaseDetails[i].rate" name="product_rate" #rate[i]="ngModel" type="text" required class="form-control">
              <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Rate
                is
                Required</span>
            </div>
            </div>

            <div class="col-md">
            <div class="form-group form-group-float">
              <label class="form-group-float-label is-visible">Quantity</label>
              <input mask="0*" value="{{purchaseDetails[i].quantity}}" [(ngModel)]="purchaseDetails[i].quantity" name="product_quantity" #quantity[i]="ngModel" type="text" required class="form-control">
              <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Quantity
                is
                Required</span>
            </div>
            </div>

            <!-- <div class="col-md">
              <div class="form-group form-group-float">
                <label class="form-group-float-label is-visible">Price</label>
                <input disabled [(ngModel)]="purchaseDetails[i].quantity * purchaseDetails[i].rate"  name="product_price" #price="ngModel" type="text" required
                  class="form-control">
                <span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Price
                  is
                  Required</span>
              </div>
            </div> -->

            <div class="col-md-1 align-self-md-center">
              <i (click)="removePurchaseDetail(i)" class="icon-minus-circle2 cursor-pointer fs-22 text-danger"></i>
            </div>


          </div>
          </mat-dialog-content>

          <div class="row justify-content-center mb-25">
            <i (click)="addNewPurchaseDetail()" class="icon-plus-circle2 fs-22 cursor-pointer text-indigo-800"></i>
          </div>



        </div>

        <div class="text-center">
          <button type="submit" [disabled]="!purchaseDetails.vendor_id" class="btn btn-primary">Add purchase <i class="icon-paperplane ml-2"></i></button>
        </div>
      </div>
    </form>

  </div>
</div>

• 添加新的采购明细行时

• 我可以获取行，但我的值正在重置

• 我不知道我做错了什么

• 有什么正确的方法来实现这一点吗

• 我是新来的，请引导我通过这个

---

当我控制台记录模型值时，它就在那里，但我不知道为什么行被重置了

发现问题：

输入名称应如下所示：

 <input name="reciept_no[{{i}}]" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">

我是这样的：

 <input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">

我建议创建

 <input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no"  #reciept_no="ngModel" type="text" required class="form-control">