how to bind component variable to form object instance property

Question

I am not quite sure how to bind a variable from my component class to a property value in my form object. The form needs to display this value and add it to the ngModel so that it can become part of the object instance.

I am struggling with the syntax and keep getting the errorNo value accessor for form control with name: 'per_print' Error: No value accessor for form control with name: I think I need to use the [(ngModel)]="myObject.property" syntax, but I am not getting this from an input into the form, but from a binded variable on the class.

  <div class="form-group">
       <label class="label-text" >Per Print</label>
       <div class="input-group" style="width:150px;">

          <h4 [(ngModel)]="job_entry.per_print"  name="per_print" 
      value='pricePerPrint'   class="form-control"
           >
          {{pricePerPrint | currency:'GBP':true:'1.2-2'}}
        </h4>
      </div>
    </div>

job_entry is my object which properties I am setting through the form. pricePerPrint is a variable on the class. I want to set this variable to one of the form instance properties. How to do this? I thought I could do it through value, as in the value of the <h4> tag, but this error persists.

i do not see here form at all + no inputs, just h4. do you need just to display dat or you want to use form to edit? — Julia Passynkova
– Julia Passynkova, Commented Apr 30, 2017 at 13:32
The above div is part of a ngForm group and I want to inject data into the form by displaying it and giving the form object one of its properties. — godhar
– godhar, Commented Apr 30, 2017 at 13:34
i still not sure what <h4> should do? You don't need [(ngModel)] on h4 and value is not a property of h4. value is property of input. — Julia Passynkova
– Julia Passynkova, Commented Apr 30, 2017 at 14:38

AVJT82 · Accepted Answer · 2017-05-01 11:58:07Z

2

You could use [hidden] input field with the value you want, so that this value will be added to your form. This means though, that you need to use pricePerPrint as the ngModel. But ngModel for your job_entry is possibly not needed. You could build the form as such, so that the object you get from the form can be assigned directly to job_entry:

onSubmit(obj) {
  this.job_entry = obj;
}

Also check the Demo for that.

So your code would look like this:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <input [hidden]="isHidden" name="per_print" 
       [(ngModel)]="pricePerPrint" [value]="pricePerPrint"/>
  <h4>Price: {{pricePerPrint}}</h4>
  <button type="submit">Submit</button>
</form>

where isHidden is set to true.

Other option I see, if you want to use [(ngModel)]="job_entry.per_print, you need to assign whatever value you have in pricePerPrint to job_entry.per_print.

edited May 1, 2017 at 11:58

answered Apr 30, 2017 at 15:46

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

5 Comments

godhar Over a year ago

This is great, thanks for this. But my question is how do I pass a value to the form object from my component class. Is placing a submit button there and asking the user to press submit really the best way, when surely this should be achievable dynamically? if job_entry is the form object then does [value] become assigned to name per_print, (which is my object property)?

AVJT82 Over a year ago

Having a bit trouble understanding what you mean here. You want to use the ngModel for job_entry? I understand that, but you cannot assign that to an h4 element, just doesn't work. And you cannot use job_entry.per_print as the ngModel here, since then the value will not be bound. I then see the option, that whatever value you set for pricePerPrint you also assign to job_entry.per_print, then you can use job_entry.per_print as ngModel: plnkr.co/edit/1Ml4ykN3Ni0UrlYqncA5?p=preview

godhar Over a year ago

Yes that looks better. Thanks. Now per_print is appearing in job_entry . No need for submit as I have other parts to the form. If I can set the values in my component class, input now seems redundant. Object job_entry can be given values outside the form, before being submitted and I can display whatever I like on the form. I was absolute that the form was the entity that both owned the object and its submission. Live and let learn....Thanks @AJT

AVJT82 Over a year ago

Okay, see, from your question you mentioned you want it to be part of the form object, so that's why I gave the answer I did (hidden input field). So yes, it's absolutely redundant if that is not what you need (setting values in component is enough) :)

eko Over a year ago

@godhar if the issue is solved, you can mark an answer -that's been helpful- as accepted: meta.stackexchange.com/a/135826/346766

Collectives™ on Stack Overflow

how to bind component variable to form object instance property

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related