输入值更改并提交 post 旧值。示例演示

Question

请问我的代码有 2 个问题，DEMO

当我在表格销售中添加一些产品时，我的输入 description 对所有 products 都发生了变化。
当我更改我的输入产品时，销售中不会更改它。

那些问题请看我的演示代码。

我试过这段代码：

我的产品

  this.myform = this.fb.group({
  'id': new FormControl('', Validators.required),
  'name': new FormControl('', Validators.required),
  'description': new FormControl('', Validators.required),
  'price':new FormControl('', Validators.required),
  'quantity': new FormControl('', Validators.required)

});

我的产品html

<form [formGroup]="myform" (ngSubmit)="onAddProduct()">
  <h4 style="text-align:center">add product</h4>

   <div class="input-field col s12"> id
      <input formControlName="id" id="id" type="text" class="validate">
   </div>

   <div class="input-field col s12"> name
      <input formControlName="name" id="name" type="text" class="validate">
   </div>

   <div class="input-field col s12"> description
      <input formControlName="description" id="description" type="text" class="validate">
   </div>

   <div class="input-field col s12"> price
      <input formControlName="price" id="price" type="text" class="validate">
   </div>
   <div class="input-field col s12"> quantity
      <input formControlName="quantity" id="quantity" type="text" class="validate">
   </div>
  <br>
  <div id="add_contrat_button_container" class="row">
    <button id="add_contrat_button" type="submit" class="button button1">
      Shto
    </button>
  </div>
</form>

我的销售

this.addsale = this.fb.group({
  'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
  'invoice_date': new FormControl('', Validators.required),
  'description': new FormControl('', Validators.required),
  'products': this.fb.array([

  ])
});

我的销售html

  <form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
 <h4 style="text-align:center">add sale</h4>
  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
       invoice_number:
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
         invoice_date:
          <input formControlName="invoice_date" id="invoice_date" type="date" >
        </div>
      </div>
      <div class="input-field col s4">
       description:
        <input formControlName="description" id="description" type="text" class="validate">
      </div>
    </div>
  </div>
  <br>
   <table>
    <thead>
      <tr style="color:black;">
        <th>id</th>
        <th>name</th>
        <th>description</th>
        <th>price</th>
        <th>quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>        
      <td><input formControlName="description" class="validate" [value]="item.description" [ngModel]="item.description" type="text">
      </td>
      <td>{{item.price}}</td> 
      <td>{{item.quantity}}</td> 
        </tr>
    </tbody>
  </table>
  <br>
  <br>
    <button type="submit">
      Register
    </button>
</form>

请问如何解决这些问题，所以最后我想要

当我添加一些产品时，我希望描述成为决定因素。
当我更改盐产品的描述时，我想发送我设置的最后一个描述。

图片

Answer 1

好的，我解决了你的问题 DEMO，你的值设置不正确，应该是

value="{{item.description}}"

我也改变了你的服务，使用 BehaviorSubject 现在你得到产品列表而不是单个产品

你的新 Service.ts

import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import * as data from '../data.json';
import { Products } from './product';
import { Sale } from './sale';

@Injectable()
 export class Service {
  private products: Products[] = [];
   private sales: Sale[] = [];
   productList: EventEmitter<Products[]> = new EventEmitter();

  constructor() { }

   addProduct(product: Products) {
    this.products.push(product);
    this.productList.next(this.products);
  }
    addsale(sale: Sale) {
    this.sales.push(sale);
    debugger;

  }
    getProduct() {
    debugger;
    return this.products;
  }
}

还有你的新 HelloComponent.ts

import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { Service } from './service';
import { Products } from './product';
import { MatSlideToggleModule } from '@angular/material';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
  selector: 'hello',
  styleUrls: ['./hello.component.css'],
  template: `
  <form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
 <h4 style="text-align:center">add sale</h4>
  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
       invoice_number:
        <input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        <div class="row">
         invoice_date:
          <input formControlName="invoice_date" id="invoice_date" type="date" >
        </div>
      </div>
      <div class="input-field col s4">
       description:
        <input formControlName="description" id="description" type="text" class="validate">
      </div>
    </div>
  </div>
  <br>

  <table>
    <thead>
      <tr style="color:black;">
        <th>id</th>
        <th>name</th>
        <th>description</th>
        <th>price</th>
        <th>quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products">
           <td>{{item.id}}</td>
   <td>{{item.name}}</td>        
        <td>
          <input class="validate" formControleName="description" value="{{item.description}}" type="text">
        </td>
 <td>{{item.price}}</td> 
  <td>{{item.quantity}}</td> 
        </tr>
    </tbody>
  </table>
  <br>
  <br>
    <button type="submit">
      Register
    </button>
</form>




  `
})

export class HelloComponent {
  @Input() name: string;
  addsale: FormGroup;
  products: Array<Products>;


  constructor(
    public service: Service,
    private fb: FormBuilder
  ) {
    this.addsale = this.fb.group({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'invoice_date': new FormControl('', Validators.required),
      'description': new FormControl('', Validators.required),
      'sale_id': new FormControl('', Validators.required),
      'products': this.fb.array([

      ])
    });

  }

  ngOnInit() {
    this.service.productList.subscribe(productList => {
      this.products = productList;
    });
  }
  onaddsale() {
    let sales = [];
      let sale = this.addsale.value
    sale.products = this.products
    let newsale = this.addsale.value
    this.service.addsale(sale);
    console.log(sale)
  }
}

输入值更改并提交 post 旧值。示例演示

input value change and in submit post old value. Example demo

forms

typescript

angular

angular-reactive-forms