I have a below form, where i am using ngModelGroup to group the inputs.
<form #form="ngForm" (ngSubmit)="submit(form.value)">
<fieldset ngModelGroup="user">
<div>
<label>Firstname:</label>
<input type="text" name="firstname" [(ngModel)]="firstname">
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastname" [(ngModel)]="lastname">
</div>
</fieldset>
<fieldset ngModelGroup="address">
<div>
<label>Street:</label>
<input type="text" name="street" [(ngModel)]="street">
</div>
<div>
<label>Zip:</label>
<input type="text" name="zip" [(ngModel)]="zip">
</div>
<div>
<label>City:</label>
<input type="text" name="city" [(ngModel)]="city">
</div>
</fieldset>
<button type="submit">Submit</button>
</form>
When i map my [(ngModel)] = "user.firstname" or "user.lastname" or "user.address.street" it works? If i do in the above way, i don't see a reason why i need ngModelGroup in total.
I am not sure how to properly use ngModelGroup for nested objects.
Below is the plunkr:
https://plnkr.co/edit/Y4bjFh6sjtvdzkUWciid?p=preview
ngModelGroup lets you shape the data received from the form by introducing "subproperties".
With ngModelGroup="user" in your template, here's what form.value will look like:
{
"user": {
"firstname": "foo",
"lastname": "bar"
},
// ...
}
Without ngModelGroup="user" in your template, form.value will be:
{
"firstname": "foo",
"lastname": "bar",
// ...
}
ngModelGroup can be useful to give the form data the same shape as your data models. But it has no impact on the properties that you bind [(ngModel)] to (these properties can be whatever you want).
Related
I have a dynamic form which probably has duplicate input names.
$(".add_more_staff").on("click", function(){
var $newMember = $(this).siblings('.company_members').clone();
$newMember.insertBefore($(this));
})
a, input{
display: block;
margin-bottom: 5px;
}
input{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<div class="company_members">
<input class="staff_name" type="text" name="name" required placeholder="name" />
<input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" />
<hr />
</div>
<input type="button" class="add_more_staff" value="Add more staff" />
<input type="submit" value="register_company_staffs" />
</form>
In the code above, you will have two inputs named mobile (or name) if you click on Add more staff button once.
Now I want to know, how should I get it in the PHP codes? According to some tests, $_POST['mobile'] contains the last input value. So how can I get all inputs value in PHP?
Should I make different names for new inputs in jQuery like name="mobile-n" (n = 1, 2 ..)
Should I use array-name for inputs like name="mobile[]" ?
Or what?
Try like this:
<div class="company_members">
<input class="staff_name" type="text" name="name[]" required placeholder="name" />
<input class="staff_mobile" type="text" name="mobile[]" required placeholder="mobile" />
</div>
in PHP:
$staff_names = $_POST['name'];
$staff_mobiles = $_POST['mobile'];
try this with jquery, during appending the html, you can add dynamic increment variable to like
staff_name_1, staff_name_2, staff_mobile_1, staff_mobile_2
with this, you can easily save or define the unique names, like I am showing you on simple example:
var a=0;
$(".add_more_staff").on("click", function(){
$(".company_members").each(function(){
a++;
$(".staff_name").attr('name', $(".staff_name").attr('name')+a);
});
});
Hope you can my idea.
Please try below it will contains data in groups, so you can easily loop it after post data and your JQuery code seems fine.
<div class="company_members">
<input class="staff_name" type="text" name="data[0][name]" required placeholder="name" />
<input class="staff_mobile" type="text" name="data[0][mobile]" required placeholder="mobile" />
</div>
<div class="company_members">
<input class="staff_name" type="text" name="data[1][name]" required placeholder="name" />
<input class="staff_mobile" type="text" name="data[1][mobile]" required placeholder="mobile" />
</div>
I am currently trying to figure out how to keep reference to individual dynamically added input fields. I have a modal popup as follows:
<div ng-controller="SamplesQueryController">
<button ng-click="toggleModal()" class="btn-splash-small">Add Sample</button>
<modal title="Create New Sample" visible="showModal">
<form role="form">
Sample Name:<br>
<input type="text" ng-model="newSampleName.sampleName">
<br> Attribute 1 Name:<br>
<input type="text" ng-model="newAtt1Name.att1Name">
<br> Attribute 1 Value: <br>
<input type="text" ng-model="newAtt1Value.att1Value"> <br>
<button id="submitSample" ng-click="createSample();toggleModal()">Submit
Sample</button>
<button id="addAttribute">Add Attribute</button>
<button ng-click="toggleModal()">Close</button>
</form>
</modal>
</div>
which currently has an input field for att1Name and att1Value, I have an addAttribute button which should add 2 new input fields (for att2Name and att2Value). I can dynamically create the inputs using a method such as:
<input type="text" ng-repeat="myinput in myinputs" ng-model="myinput">
</input>
but how can I keep reference to each of the typed in values in the input fields and how can I create 2 fields for each element in myinputs
Preferably, I would be storing these values in some sort of structure like attributes.att1.name, attributes.att1.value, attributes.att8.name, etc
You'll want to have your model as an Array that contains Objects, which has the property 'name' and 'value' initiated.
Then it's pretty easy to create a ng-repeat div, that contains 2 text input fields:
<div ng-repeat="input in inputs">
<input type="text" ng-model="input.l">
<input type="text" ng-model="input.v">
</div>
Then you can subsequently add the fields by pushing newly initiated object to the $scope.inputs.
function add() {
var obj = {attr1Name: '', attr1Value: ''};
$scope.inputs.push(obj);
}
Working fiddle here: https://jsfiddle.net/ccvLhmps/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<h2>Cost Calculator</h2>
<p></p>
<p></p>
<p></p>
<div ng-app>
<input name="amount" ng-model="a" placeholder="Amount" />
<input name="adjustment" ng-model="b" placeholder="Adjustment" />
<input name="advance" ng-model="c" placeholder="Total" value='{{ a-b}}' />
<input name="balance" placeholder="Total" readonly required value='{{ a-b-c}}' />
</div>
</body>
</html>
I have used mvc partial control in my page twice for search functionality.
It has it own controller to search, so my page has two controller with same name.
<div ng-app="app" ng-controller="MainController" ng-init="SetSearchParam()">
<div id="search1">
#Html.Partial("_SearchPartial") // say it search1
// some other code to show search results
// ....
// ..
</div>
<div id="search2">
#Html.Partial("_SearchPartial") // say it search2
// some other code to show search results
// ....
// ..
</div>
</div>
This is _SearchPartial:
<form name="SearchCommon">
<div ng-model="search" ng-controller="SearchPartialController">
<div>
<input type="text" value="" placeholder="Stock" ng-model="search.Stock" />
</div>
<div>
<input type="text" value="" placeholder="Make" ng-model="search.Make" />
</div>
<div>
<input type="text" value="" placeholder="Year" ng-model="search.Year" />
</div>
<div>
<input type="submit" value="SEARCH" ng-click="searchdata(search)" />
</div>
</div>
</form>
Now on init of MainController , i set the search model value in SetSearchParam() method like below:
$scope.SetSearchParam = function(){
var s = {};
s.Make = "Test";
s.Year = "2012";
s.Stock = "5"
$scope.search = s;
};
As search model is used in SearchPartialController, and page has two search control, value of s will be set in both partial controller. Also when i change params in search1, it will reflect search2.
I want that those search params only set for search1, not for search2.
When i change search1 params , it should not reflect the search2 or vice versa.
Is there any way to achieve it?
I thing you should initialize your filter(search) before your function.
Controller:
$scope.search1 = { Make : "Test", Year: "2012", Stock : "5" };
$scope.searchdata = function(search){console.log(search);};
Your view:
<body ng-controller="SearchPartialController">
<form ng-submit="searchdata(search1)">
<input type="text" placeholder="Stock" ng-model="search1.Stock" />
<input type="text" placeholder="Make" ng-model="search1.Make" />
<input type="text" placeholder="Year" ng-model="search1.Year" />
<button type="submit" class="btn btn-sm btn-primary">
Save
</button>
</form >
</body>
My form looks like this.
<form>
<input type="text" name="pic" value="test" />
<input type="text" name="person[0].name" value="Bob" />
<input type="text" name="person[0].age" value="25" />
<input type="text" name="person[1].name" value="Jim"/>
<input type="text" name="person[1].age" value="30" />
</form>
Is their a method that can take in any form and if the name of several form elements is the same then make them into an array under the initial name in json.
The json object would ideally look like
{
"pic" : "test",
"person":[
{"name":"Bob", "age":"25"},
{"name":"Jim", "age":"30"}
]
}
I found a library that handles this
form2js
Chrome's "Save Password" feature apparently makes a simple choice when offering to remember passwords: It looks at the value of the previous input field in the DOM and offers to key the password to that value. So if you have this username/password combo:
<form>
<input value="myname" />
<input value="mypassword" />
</form>
the browser will offer to save the password "mypassword" under the key "myname".
This presents a problem when using Dojo ValidationTextBox however, because the Dojo parser inserts an invisible INPUT control that contains a character "X" used as a validation icon (simplified HTML view):
<form>
<div>
<input value="X" />
<input value="myname" />
</div>
<div>
<input value="X" />
<input value="mypassword" />
</div>
</form>
Under this circumstance Chrome offers to remember "mypassword" under the name of "X", which is awkward.
Is it possible to override this behavior in Chrome? Or do we need to rewrite this functionality in Dojo?
Add name properties to the validation widgets:
this.username = new ValidationTextBox({ name: 'username' });
this.password = new ValidationTextBox({ name: 'password' });
Or declaratively:
<input type="text" name="username" data-dojo-type="dijit/form/ValidationTextBox" />
<input type="text" name="password" data-dojo-type="dijit/form/ValidationTextBox" />
This will produce nodes with name attributes which Chrome will be able to use to associate the value with a key. Your simplified HTML view would then look like this:
<form>
<div>
<input value="X" />
<input name="username" value="myname" />
</div>
<div>
<input value="X" />
<input name="password" value="mypassword" />
</div>
</form>
I've figured out how you can make this to work. When you use the name attribute with the appropiate values(username, password) the username value will be the input value above the password input.
1. Surround your fields with a form
<form method="post">
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
</form>
2. Add an autocomplete to your input field with the value 'username' and 'password'
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
<input type="password" autocomplete="password" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
3. Add a button to submit or just a regular button
<input type="submit" value="send" />
See the fiddle