formControlName input value undefined

Question

I have a problem with formControlName, I want to submit this form, but one input is undefined, like in photo.

in console look my submit:

I used this code:

<form [formGroup]="addProductForm" (ngSubmit)="onAddProduct()" class="col s12" materialize style="text-align:center">
    <div class="input-field col s12">
      <input formControlName="Quantity" id="Quantity " type="number" class="validate" [(ngModel)]="Quantity">
             </div>
    <div class="input-field col s12">
      <input formControlName="Unit_price" id="Unit_price" type="number" class="validate" [(ngModel)]="Unit_price">
           </div>
    <div class="input-field col s12">
     <div class="c1" style="text-align:left;">
        Subtotal:
      <input formControlName="Subtotal" id="Subtotal" type="number" class="validate" [(ngModel)]="Subtotal" [value]="Quantity*Unit_price">
    </div>
  </div>

  <br>
  <div id="add_contrat_button_container" class="row">
    <button id="add_contrat_button" type="submit" class="button button1">
      Submit
    </button>
  </div>
</form>

Please, can you look and ask me what is the problem in this code, In Subtotal set automatic this value [value]="Quantity*Unit_price" but don't submit. Thank you

You use formControlName and ngModel. Remove one and try again. And in both cases, you don't need to use [value] — user4676340
– user4676340, Commented Mar 12, 2018 at 15:50
plus 1 for trichetriche's comment. BTW, [value] supports string only, [ngValue] supports any type — Haifeng Zhang
– Haifeng Zhang, Commented Mar 12, 2018 at 15:57
@trichetriche I use togather because, this value I can change and the subtotal will be change. Also, I try and nothing change — Lonna
– Lonna, Commented Mar 12, 2018 at 16:01
If you want to make a subtotal then you should listen on the (input) event, not use both form modules. — user4676340
– user4676340, Commented Mar 12, 2018 at 16:02

dnp1204 · Accepted Answer · 2018-03-12 16:02:54Z

1

First, you need to remove your ngModel since you already use formControlName. The you check at this link angular2 and formControlName value in template. It may be helpful to you. And I don't understand why you need to do so. I think you should set the value for Subtotal after you submit the form is a better solution. And change the input for subtotal to a normal text field to display it.

answered Mar 12, 2018 at 16:02

dnp1204

4915 silver badges14 bronze badges

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

2 Comments

Lonna Over a year ago

Thank you for your answer, If I not used [(ngModel)] I don't display Unit_price and Quantity in [value]="Quantity*Unit_price"

Lonna Over a year ago

Can you write please some code, how to solution this?

Collectives™ on Stack Overflow

formControlName input value undefined

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related