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 #">
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.
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.
Related
I am creating a form for an assignment where when the form is completed the data entered for each applicant is saved to a DB. Each property for the applicants is created in a Applicant class, some are required some not.
As part of this I need to ask the user to enter the gender of the applicant. What I had initially thought to do and implement was create a checkbox for each gender in my form and dependent on which one is checked in my page model I then save that gender back to the Gender property of my Applicant.cs which is a string. When the OnPost() is run.
This works fine but the Gender property must be Required and when I set the prop to Required in the class and run the application, when I try to submit the form I get an error on the page stating the Gender is required.
What is the best way for me to code this in this case or should I think about an alternative solution altogether? I know I could just get the user to type in the gender in a text box and it will work but I thought a group of checkboxes would be neater.
Thanks in advance,
If you want the user to make one choice from a very limited number of options, the best control is the input type="radio". This also has the benefit of working well with Razor Pages validation.
Here is your PageModel property:
[BindProperty, Required]
public string Gender { get; set; }
And here is your form:
<span asp-validation-for="Gender"></span>
<form method="post">
<input type="radio" asp-for="Gender" value="Male" />Male<br />
<input type="radio" asp-for="Gender" value="Female" />Female<br />
<input type="radio" asp-for="Gender" value="Other" />Other<br />
<input type="submit"/>
</form>
I have a simple form in react, which lives in a modal. If a user was to use autofill for an email field for example, it would update other fields including fields that I've already filled in. This would lead users to submitting data, not knowing that fields out the view have been updated.
I've tested this in non-react forms and Google Autofill works fine, in that it would not overwrite existing values in fields. But in react lets say I inserted firstname = john, and then use autofill on the email...it would over 'John' and use whatever is saved in Autofill.
Is anyone aware of a way around this? I'm not going to turn autocomplete off as I still want users with the ability, anyway I've tried variations of autocomplete=off as suggested else where but still no result
You can use autocomplete="off" in your input that you do not wish to autofill.
Please also make sure your input types are correct.
example: <input type="text" name="foo" placeholder="foo" autocomplete="off">
You can even do this using JS:
inputElm.setAttribute( "autocomplete", "off" );
as an example.
regards
Aaron
Try to create hidden input right before your input and add random number for your original input name where you don't want Chrome to autofill values:
<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
type="text"
name={"address " + Math.random()}
/>
I am generating a form dynamically in my application. The fields of the forms are the column names in the database table.The user of this application will just pass the name of the table and the skeleton for CRUD application will be prepared dynamically.
In the view part I want to achieve something like this
<div class="form-group" ng-repeat="(key,col) in cols">
<label for="{{::col}}">{{::col | uppercase | replaceUnderscore}}</label>
<input class="form-control" type="text" ng-model="{{::col}}" required />
</div>
In the ng-model I just need the string value that is, if the column name is Username then model value should be something like ng-model="username" and the value should not be displayed in the form field. So I want to achieve kind of one way data binding.
Simply use a JS object, for example $scope.data = {}, and then ng-model="data[col]".
I have a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks
I'm giving an student scenario as example.
Assume I have the below scope variables that needs to populated when I select a id.
$scope.student.name;
$scope.student.address;
$scope.student.city;
$scope.student.zip;
The sample html below.
<input type="text" ng-model="student.id"/>
<input type="text" ng-model="student.name"/>
<input type="text" ng-model="student.city"/>
<input type="text" ng-model="student.address"/>
<input type="text" ng-model="student.zip">
In a regular jQuery, I would write on change and trigger. But how do I achieve this in angular way.
I might want to have the entire db values in a hashmap of <studentid,List<studentdetails>> and use this hashmap values to be populated on the respective fields.
I know this is probably a little late on the draw to answering this question, but I was searching for an answer to auto-population with Angular today and found that you could populate an input using ng-value and passing it into your value held inside of {{}}.
It would look something like this: ng-value="{{exampleValue}}
Hope this helps.