web-dev-qa-db-fra.com

changer la valeur d'entrée angulaire 5

S'il vous plaît, pouvez-vous me suggérer comment soumettre ma valeur lorsque je la modifie? Donc, je veux soumettre amount_paid lorsque je change cette valeur. Pour résoudre ce problème, je crée un changement de fonction qui me renvoie de la valeur. Cette valeur je dois soumettre. J'ai essayé ce code:

Code du modèle:

 <div class="input-field col s2" style="float: right;">
      <label for="amount_paid">Amount Paid:</label>
      <input id="amount_paid" [value]="amountpaid" type="number" class="validate" (change)="updateForm($event)">
 </div>

Code Ts:

    this.addsale = this.fb.group({
      'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
      'client_id': new FormControl('', Validators.required),
      'amount_paid': new FormControl('', Validators.required),
      'products': this.fb.array([]),
    });

  updateForm(ev: any) {
    this.addsale['controls']['amount_paid'].setValue(ev.target.value);
    console.log(ev.target.value)
  }

  onaddsale() {
    let sale = this.addsale.value;
    sale.amount_paid = this.amountpaid; //I used this, because I want to submit this value If I don't want to change. 
    let newSale = new Sale(sale);
    console.log(newSale)
    console.log(this.addsale.controls.amount_paid.value) // Value input when I chane
   }

  get amountpaid() {
    return this.products
      .map(p => p.p_Unit_price * p.p_Quantity)
      .reduce((a, b) => a + b, 0);
  }

S'il vous plaît, j'ai 2 situation, 1, je soumets une entrée de valeur, ex, 100. Cela fonctionne correctement. et 2. Je soumets une valeur d'entrée lorsque je modifie cette valeur. Par conséquent, sur 100, je souhaite modifier 90, et ce 90, je souhaite le soumettre. Ma fonction soumet également cette première valeur sale.amount_paid = this.amountpaid; 

UPDATE: demo exemple pour mon problème

Le problème est que le champ amount_paid doit être modifié et que la valeur modifiée doit être préservée. Comment modifier ma valeur? Je veux le champ deux liaison, si je ne peux pas changer, soumettez get amountpaid() {} sinon soumettez ma valeur d'entrée.

Image 1 Je sauvegarde le formulaire sans changer la valeur.  enter image description here Image 2 J'enregistre le formulaire avec la valeur modifiée, mais la valeur ne change pas. montrer en console.

 enter image description here

angulartypescriptangular5onchange
1
user9699663

Deux choses:

  1. le modèle amount_paid devrait ressembler à ceci:

<input formControlName="amount_paid" id="amount_paid" type="number" class="validate">

  1. Et en .ts:

    this.addsale.controls['amount_paid'].valueChanges.subscribe(value => { amount_paid is in value and it's called every time the value changes. });

ou pour la forme entière:

this.addsale.valueChanges.subscribe(value => {
    // whole form object is in value and it's called every time any form field changes.
});

Éditez en fonction des commentaires et de votre exemple: Voici la solution de travail . Au moins, j'espère vous comprendre correctement cette fois-ci.

1
Laker

Pourquoi vous n'utilisez pas la reliure: 

<input id="amount_paid" [(ngModel)]="amountpaid" type="number" class="validate" (change)="updateForm($event)">

TypeScript:

     amountpaid:string = '';

     updateForm(ev: any) {
        console.log(this.amountpaid);
      }
0
Abderrahim Soubai Elidrissi