5

Please, can you suggest me how to submit my value when I change it? So, I want to submit amount_paid when I change this value. For solution this, I create a function change that return me value. This value I need to submit. I tried this code:

Template code:

 <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>

Ts code:

    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);
  }

Please I have 2 situation, 1, I submit value input, ex, 100. This work correctly. and 2. I submit input value when I change this value, so, from 100 I want to change 90, and this 90 I want to submit. My function submit also this first value sale.amount_paid = this.amountpaid;

UPDATE: demo example for my problem

The problem is, amount_paid field should be modified, and the modified value should be preserved. How to modify my value? I want the field two binding, if I can't change, submit get amountpaid() {} otherwise submit my value input.

Image 1 I save the form without changing the value. enter image description here Image 2 I save the form with the changed value, but the value doesn't change. show in console.

enter image description here

Improve this question
1
  • Don't mix [value] property with formcontrolName Commented May 7, 2018 at 10:17

1 Answer 1

Reset to default
3

Two things:

  1. amount_paid template should look like this:

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

  1. And in .ts:

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

or for the whole form:

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

Edit based on the comments and your example: Here is the working solution. At least I hope I understand you correctly this time.

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

I used [value]="amountpaid" because this return value from this get amountpaid() {}
You dont have to, and you should do it like that. You can do it as you do somewhere in your code: this.addsale['controls']['amount_paid'].setValue(ev.target.value); You are combining template driven forms and reactive forms pattern. It's a bad approach. Use one or the other.
Please, I don't understand, How to calculate my amountpaid()? If I write like your answer, for me doesn't display input. In this post stackoverflow.com/questions/50175365/…, I show all my code, only in this I have different problem. Please look again. Thank you
I don't understand what you need. Can you try to describe it better please?
I am creating an invoice, in this invoice decides all products, price, quantity, name etc. The amount of products is calculated by the function get amountpaid () {}. So far it works very well. In this case, I have to make it possible for this value to change, in case it will be needed. In my code, the changed value is not saved. Please, try this example stackblitz.com/edit/angular-arvwvn?file=app/hello.component.ts
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.