In Angular JS are created inputs.
<input type="text">
<input type="text">
How I can to get values from each inputs and send to server?
I tried:
<input type="text" ng-model="typeInput">
But I get value only one field.
In server I am planning to get data format: $_POST['type'][0] = 'One value'; $_POST['type'][1] = 'Two value';
I mean, that I need send to server array of values. For example:
name="type[]" value="1"
name="type[]" value="2"
name="type[]" value="3"
So, in server I cando loop for check:
foreach($_POST['type'] as $val){
//prepare
}
Using the ng-model binds it to the property of the same name in the $scope of the controller.
You would access it in your controller like so:
$scope.typeInput
Or you can access it in your HTML like so:
{{typeInput}}
To access both fields, you would need to give them both a different property name to bind to.
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
...
alert($scope.firstName);
alert($scope.lastName);
More complete info here: https://docs.angularjs.org/api/ng/directive/ngModel
Edit: Here's an example fiddle with binding your inputs to an array: https://jsfiddle.net/gxmw62rj/2/
Related
In AngularJs 1.x want to print all the ng-Model names in controller. In my application form has more than 100 input fields. Then my application one of the part, I have to declare all the input names into server side even few variable value is empty. So if I get ng-model names easy way to declare the variables.
For Example :
<div controller="IndexController as form">
<form name="myform">
<input type="text" data-ng-model="form.name" name="name"/>
<input type="text" data-ng-model="form.email" name="email"/>
<input type="text" data-ng-model="form.mobile" name="mobile"/>
</form>
</div>
Ouput: name, email, modile
You're best wrapping your ng-model in a scope object.
For example:
<input type="text" data-ng-model="form.details.name" name="name"/>
<input type="text" data-ng-model="form.details.email" name="email"/>
<input type="text" data-ng-model="form.details.mobile" name="mobile"/>
A model is just an object with key:value properties.
You can use the Object.keys to get an array of all properties keys and iterate on them, like below..
var keys = Object.keys($scope.details);
for(var i = 0; i < keys.length; i++){
console.log(keys[i]);
}
Consider you form model is like this:
let form = {"email": "abc#xyz.com", "fname": "abc"};
You can make use of for ... in loop.
The for...in statement iterates over the enumerable properties of an
object. For each distinct property, statements can be executed.
for (let i in form) {
console.log(form[i]);
}
OUTPUT
abc#xyz.com
abc
I am using angular 2 forms in my application and i have created the input based on my model. I have binded my input field with ngmodel and now I want to do a dirty check on this input field. So i have added input with # variable. Here is my code:-
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}" class="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
But I am getting an error something like:-
There is no directive with "exportAs" set to "ngModel" ("="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" [ERROR ->]#query3="ngModel">
Can anybody help me here..
You dont need to use #query3="ngModel" for angular.js 2,
so change
from
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
to (this will work)
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" >
How do I initialize a form to values from other $scope variable in AngularJS?
I know that I have to use ng-init to achieve that but instead of initializing it to values I have to initialize that to value in the variable.
I have $scope.User containing all the details of the user, so when the data comes back I want that to fed into respective fields. For example $scope.User.FirstName gets fed into FirstName input field.
<label>FirstName:</label>
<input type="text" id="FirstName" required ng-model="newUser.FirstName" ng-init="newUser.FirstName='User.FirstName'"/>
The HTML element has to be defined as below.
<input type="text" ng-model="firstname">
Inside your angular controller, the JS code will be as below,
$scope.firstname = $scope.User.FirstName;
This will ensure that textbox will have a value displayed
In your HTML :
<input type="text" ng-model="User.firstname ">
<input type="text" ng-model="User.lastName ">
//other html elements
In your controller :
$scope.User= {
firstname : 'my first name',
lastName : 'my last name',
//..other data
}
I have an input field in a form with some validations. It works like a charm.
It basically looks like this:
<input
class="form-control"
type="number"
ng-model="zipcode"
ng-minlength="5"
ng-maxlength="5"
id="zipcode"
name="zipcode"
required
>
A working plunkr is here: http://plnkr.co/edit/H0h59kG75T5MGE9cAhSo?p=preview
But now I also want to react to every input change - whether valid or not. So for example if the input field contains "123" it is not valid and the value is not transferred to my model - thats fine. But I still want to get the value to do some intermediate requests to a webservice.
Any Ideas?
First call the form element in your controller, then use the $viewValue attribute :
View :
<form name="form">
<input
...
ng-model="zipcode"
ng-change="getRawValue(form)"
name="zipcode"
required
>
</form>
Controller:
$scope.getRawValue = function(form) {
var rawValue = form.zipcode.$viewValue;
}
Angular 1.3 introduced a real answer for this: allowInvalid in ngModelOptions.
Example:
<input
type="text"
name="userName"
ng-model="user.name"
ng-model-options="{allowInvalid: true}"
>
Here is what i came up with for your scenario.
Basically you can write a directive which requires ngModel (ngModelController). The ngModelController has a array of parsers which it call to parse the view value in a pipeline manner. If validation fail these parsers do not update the model. If you inject a custom parser at the start of this parsers array, you can get the each view change value and do anything you want with it.
See my plunkr here http://plnkr.co/edit/ruB42xHWj7dBxe885OGy?p=preview (See console)
The basic code would be
ngModelCtrl.$parsers.splice(0,0,(function (viewValue) {
console.log("The view value is:"+viewValue)
return viewValue;
}));
Also see ngModelController documenation
Is there anyway that I can bind two model values to one input field?
Suppose I have input field which I want to be the value of two variables in the scope something like:
<input type="text" model="sn_number; id" >
You cannot, but there are some workarounds.
1. Use ngChange to update the other model
<input type="text"
ng-model="sn_number"
ng-change="id=sn_number"/>
2. You could watch a model, and when in changes, update another
$scope.$watch('sn_number', function(v){
$scope.id = v;
});
You would need to watch also for changes in id if you want to keep them in sync.
Example here
You can bind fields immediately, not only in ng-change, and actually it isn't data binding, its only angular expression
<label>Name</label>
<input type="text" ng-model="name" value="{{name}}"/>
<label>Key</label>
<input type="text" ng-model="key" value="{{key=name}}" />
It would make no sense to bind an input to two variables in the model. Binding works both ways, so if the model is updated, the field is updated and vice-versa. If you were to bind to two variables, what would be the single source of truth?
However you can use ng-change to call a method on the controller which can set two variables when the field changes.
with ng-init
<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">
or
<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">