Question

我有这个html代码，在这段代码中我使用[（ngModel）]来改变我的值输入，当我改变时我想要自动计算我的总计，小计和Amound付费。也许这不是一个好的解决方案，因为我有一些问题。

当我添加一些数据时，我的所有数据chnage值都获得最后的设定值。就像在照片中一样，

我需要帮助。

我的HTML代码

 <form [formGroup]="addsale" (ngSubmit)="onaddsale()">
      <table align="center" class="table table-bordered table-hover">
        <thead>
          <tr style="color:black;">
            <th>Unit_price</th>
            <th>Quantity</th>
            <th>Description</th>
            <th>Subtotal</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index">
             <td>
              <input formControlName="Unit_price" id="Unit_price " type="number" class="validate"[(ngModel)]="item.Unit_price">
            </td>
            <td>
              <input formControlName="Quantity" id="Quantity " type="number" class="validate"  [(ngModel)]="item.Quantity"> 
            </td>
            <td>
              <input type="text" formControlName="Description" id="Description" name="Description" [(ngModel)]="item.Description">
            </td>
            <td>
              <input formControlName="Subtotal" id="Subtotal" type="number" class="validate"  [(ngModel)]="item.Subtotal">
            </td>
            <td>
              <button type="button" class="fa" (click)="onDelete(i)">x</button>
            </td>
          </tr>
        </tbody>
      </table>
      <br>
      <br>
      <div class="row">
        <div class="input-field col s2" style="float: right;">
          <label for="total">Total {{total}} ALL</label>
          <input formControlName="total" id="total" type="text" class="validate"   [(ngModel)]="total">
        </div>
        <div class="input-field col s2" style="float: right;">
          <label for="amount_paid">Amount Paid:</label>
          <input formControlName="amount_paid" id="amount_paid" [(ngModel)]="total" type="text" class="validate">
        </div>
        <div class="input-field col s2" style="float: right;">
          <label for="total">Subtotal</label>
          <input formControlName="Subtotal" id="Subtotal" type="text" class="validate"  [(ngModel)]="total">
        </div>
      </div>

      <hr>
      <br>
      <div id="add_homebox_button_container" class="row" style="float: right;">
        <button id="add_client_button" type="submit" class="btn waves-effect waves-light">
          Register
        </button>
      </div>
    </form>

代码ts：

export class AddSaleFormComponent implements OnInit {
  addsale: FormGroup;
  loading: boolean = false;
  client: Client[];
  producttype: ProductType[];
  contrat: Contrat[];
  gpss: GPS[];
  homeboxp: HomeboxP[];
  sensors: Sensors[];
  homebox: Homebox[];
  products: Products[] = [];
  Price: number = 0;
  Total;
  variable: any;
  Quantity: number;
  Unit_price: number;

  selectedClient: Client = new Client('');
  @Input() selectedProduct: Products;

  constructor(
    private router: Router,
    private fb: FormBuilder,
    private ss: SalesService,
    private ps: ProductsService,
    private cs: ClientService,
    private pts: ProducttypeService,
    private css: ContratService,
    private gps: GpsService,
    private hbp: HomeboxpackageService,
    private sensor: SensorsService,
    private hb: HomeboxService

  ) {
    this.addsale = this.fb.group({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'invoice_date': new FormControl('', Validators.required),
      'client_id': new FormControl('', Validators.required),
      'amount_paid': new FormControl('', Validators.required),
      'notes': new FormControl('', Validators.required),
      'Subtotal': new FormControl('', Validators.required),
      'products': this.fb.array([]),
      'total': new FormControl('', Validators.required),
      'contactNo': new FormControl('', Validators.required),
      'address': new FormControl('', Validators.required),
      'Unit_price': new FormControl('', Validators.required),
      'Quantity': new FormControl('', Validators.required),
      'Description': new FormControl('', Validators.required),
      'line_num': new FormControl('', Validators.required)
    });
  }

  ngOnInit() {

    this.products = this.ps.getProduct();
    console.log(this.products)

    this.pts.getAllProductType().subscribe(
      producttype => {
        this.producttype = producttype;
      }
    );
  }


  onaddsale() {
    this.loading = true;
    let sale = this.addsale.value
    sale.products = this.products

    let newSale = new Sale(sale);
    console.log(newSale)

    this.ss.saleitemcreate(newSale).subscribe(
      result => {
        if (result === true) {
          Materialize.toast('Sale saved successfully', 4000);
        } else {
          this.loading = false;
        }
      },
      error => {
        this.loading = false;
      }
    );
  }

  get total() {
    let Total = 0;
    for (let p of this.products) {
      Total += p.Unit_price * p.Quantity;
    }
    return Total;
  }
  Subtotal() {
    let subtotal = 0;
    for (let p of this.products) {
      subtotal = p.Unit_price * p.Quantity;
    }
    console.log(subtotal)
    return subtotal;
  }

}

Answer 1

您的问题是FormGroup。正如您所看到的，您已经为{Unit_price＆＃39;提供了一个FormControl。但是，在您的模板中，您有多行，并且在每一行中都有一个指向同一FormControl的输入（通过FormControlName指令）。但它们都属于同一个FormGroup，并且与形式混淆，因此所有具有相同名称的输入都指向相同的FormControl，从而导致您遭受的奇怪行为。您不能在同一FormGroup指令下拥有重复控件。

您要做的是为表格的每一行定义FormGroup。这样，您就会拥有一个FormGroup数组。在每个中，都会有FormControl具有唯一名称，因此您的问题将会消失。

这意味着您必须为FormGroup数组中的每个产品制作products，并为公共控件制作不同的FormGroup（总计，小计.. ）。

当然，这意味着products中的FormGroup数组不再是必需的。

另一个建议是删除“总数”中的数据绑定。字段，因为您不会编辑它们。您可以将[（ngModel）]更改为[ngModel]。

事实上，虽然我不是反应形式的专家，但我认为，如果你使用FormControl和FormGroup，你根本不需要ngModel。< / p>

检查后表情发生了变化。以前的价值：＆＃39;型号：1777＆＃39;。当前价值：＆＃39;型号：2222＆＃39;

1 个答案: