0

How do we write input fields on AngularJS page which has Onetomany mapping?

User Class has Name and phone attributes and can have multiple phone numbers.

AngularJS code for fName input field

<input tabindex="10" style="width: 60%;" type="text" ng-model="ctrl.user.fName" placeholder="First Name">

''''AngularJS code for phone mapping -as this is a OneToMany field so i have taken List in User class, now i have 3 input textfields on AngularJS page-so how do i write ng-model for the same, for first text field I have declared like below but what about second and third text fields-how to declare ng-model for phone field.

<input type="text" ng-model="ctrl.user.phone.phoneNumber" placeholder="Parking #">
Developer1001
  • 63
  • 1
  • 8

2 Answers2

0

The basic answer is by using *ngFor, but I'm not sure this is the best approach for your use case.

<div *ngFor="number of ctrl.user.phone.phoneNumbers">
  <input type="text" ng-model="number" placeholder="enter a new number">
</div>

If you only plan to have three numbers it might be easier just to give a specific phone type to each one:

<input type="text" ng-model="ctrl.user.phone.homePhone" placeholder="Home #">
<input type="text" ng-model="ctrl.user.phone.cellPhone" placeholder="Cell #">
<input type="text" ng-model="ctrl.user.phone.workPhone" placeholder="Work #">

Finally, depending on what version of Angular you are using, you might find it easier to implement a FormControl instead of using ng-model.

Ben Hulan
  • 537
  • 2
  • 7
  • Thanks @Ben Hulan, I will try to use above method. – Developer1001 May 15 '19 at 17:36
  • how can i write multiple text boxes using this
    . I mean this way there will be only one text box on screen, what about 2nd and 3rd input box?
    – Developer1001 May 15 '19 at 17:42
  • That's what I was getting at when I said I'm not sure this is the best approach for your use case. The `*ngFor` will only render multiple inputs if the structure of your data model includes multiple phoneNumber types. I think you want to use a FormControl instead of `ng-model`. If you tell me what version of Angular are you using I can point you in the right direction; the syntax changes a lot among different versions. – Ben Hulan May 15 '19 at 17:53
  • iam using AngularJS v1.5.8 and thanks for your help. I will explore formControl. – Developer1001 May 15 '19 at 18:00
  • [This post](https://stackoverflow.com/questions/24248098/angularjs-dynamic-form-from-json-data-different-types) may be useful to you. If your question is answered, please up-vote. – Ben Hulan May 15 '19 at 18:19
0

so i was able to find the answer and surprisingly not much material is available on any portal regarding the same.

so the question was how to use OneToMany mapping in AngularJS and any backend like Springboot with Hibernate.

Ex User has direct columns like Name, age, DOB etc but lets say User has onetomany mapping with an object Contact (which further has phonenumber, email, emergency contact etc)

In Agular we can directly put ng-bind on name field like ctrl.use.name but for phonenumber field, it was specified in below way

ctrl.user.contact[0].phonenumber

Please note that, now in user class you have to make a setter which accept array of contacts like this-

public void setContact(Contact[] contacts){....implementation}

so now on user form i can have multiple contacts object which will be persisting as OneToMany relationship.

Developer1001
  • 63
  • 1
  • 8