Develop Reference

Storing value of a text input in AngularJS

I have an input:
In the controller I want to obtain the value of the text input by setting available. For example:
vm.inputValue = document.getElementById('link').value;
It breaks my code as I get a console error of:
TypeError: Cannot read property 'value' of null
What am I doing wrong?

AngularJS have a directive that does it to you, the ng-model. It binds in a variable the input you enter in the HTML and it reflect the changes you make in the variable inside your controller in JavaScript.
In your HTML
<input type="text" ng-model="vm.myText">
{{ vm.myText }} <!-- This is output the value of vm.myText in the HTML -->
<button ng-click="vm.logData()"></button>
In your JavaScript
function MyController(){
var vm = this;
vm.myText = '';
vm.logData = logData;
function logData(){
console.log('Your data is ', vm.myText);
// This easy, you can access your value in the JavaScript
}
}

Probably you forget to set the id (id = "link")of the input field in HTML:
<input id = "link" type = "text">
Also, you can do the same thing using ng-model
<input ng-model = "vm.inputValue" type = "text">
And from controller, you can get the correct value if you define a scope variable:
$scope.vm = {};
$scope.vm.inputValue = "";

Get all input fields onblur

I made the following code (jsFiddle) to get the input of a text field:
var app = angular.module('myApp', [
'my.controllers'
]);
var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
});
controllers.controller('listdata', function($scope, $http) {
$scope.editItem = function(event) {
var fieldTitle = $(event.currentTarget).attr("data-id");
var fieldValue = event.target.value;
console.log(fieldTitle + " : " + fieldValue);
};
})
In this case the function only returns the field name and field value of which the text is changed. What is the correct way to get all values of all input fields, when one of the fields is changed?

Regarding to your question
"What is the correct way to get all values of all input fields, when one of the fields is changed?",
this fiddle shows you one of the correct ways to get all the results on field change.
The basic idea is to use ng-model directive for input fields: in fact, your code
var fieldTitle = $(event.currentTarget).attr("data-id");
var fieldValue = event.target.value;
It's a sign you are not thinking in a angular way (and i suggest you to read this excellent answer to get an idea of what you should do).
The solution
Use ng-model to bind your variables to your scope, and ng-change to intercept changes in them:
<input type="text" ng-model="id" ng-change="editItem(id)">
<input type="text" ng-model="title" ng-change="editItem(title)">
<input type="text" ng-model="number" ng-change="editItem(number)">
and in your controller:
$scope.editItem = function (value) {
console.log("currentValue" + value);
console.log("ID:" + $scope.id + " Title: " + $scope.title +" Number:" + $scope.number);
};

First of all you have'nt used ng-model directive in your input box hence it will definetly give error if you use ng-change and ng-blur on that particular input.
<input type="text" data-id="id" ng-model="itemList.input1" ng-change="editItem()">
<input type="text" data-id="title" ng-model="itemList.input2" ng-blur="editItem()">
<input type="text" data-id="number" ng-model="itemList.input3" ng-blur="editItem()">
Here is an
jsfiddle where i have console.log a object which returns you all three values when blur or change from a input.

Why binding to null not work when value of number input illegal in AngularJs

See example here: https://jsfiddle.net/codefalling/u2mn764x/1/
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="number" ng-model="value" size="30" >
<input type="button" ng-click="change()" class="btn-primary" value="TEST" >
</div>
</div>
function TodoCtrl($scope) {
$scope.change = function() {
$scope.value = null
}
}
When I type 10 into number input, click button, it turn to be empty.
However when I type a standalone e or . into number input, then click button, nothing happend. But $scope.value = 123 stills works.
So, Why view didn't get update(empty) in this situation?
Additional, is there any other way to empty it?

To clear out the HTML 5 number controls, you can check the state of the control and if it is invalid then override its value to blank. I have updated your fiddle with the below code https://jsfiddle.net/u2mn764x/3/
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="number" ng-model="value" size="30" id='mynumber'>
<input type="button" ng-click="change()" class="btn-primary" value="TEST" >
</div>
</div>
function TodoCtrl($scope) {
$scope.change = function() {
if (!document.getElementById('mynumber').validity.valid)
{
$scope.value = null
document.getElementById('mynumber').value='';
}
}
}

For short, because e and . is not the complete legal numeric value. According to Foalting point number in W3 spec:
if the value started by ., it must be followed by one or more "0—9";
if the value started by e, it must be followed by an optional + or -, and one or more "0-9"
As the HTML check is not passed, it will not trigger the JS, as I imagine. If you continue to input .1 or e45, it works.

As soon as you type 10 inside Number Input,Angular will bind 10 and it will be like $scope.value = 10, but when you fire click event,you are changing the value to null like $scope.value = null,so send the value of model through the event and bind it to your variable.
<div ng-app>
<div ng-controller="TodoCtrl">
<input type="number" ng-model="value" size="30" >
<input type="button" ng-click="change($event,value)" class="btn-primary" value="TEST" >
</div>
</div>
And the javascript code :
function TodoCtrl($scope) {
$scope.change = function($event,val) {
$scope.value = val;
}
}

Thanks to comment of #zeroflagL.I found the answer.
Model did not have a value when input is illegal. So $scope.value = null or $scope.value = '' won't work because they are illegal value,too.
Model value and view value are both undefined, so angular did not update view.
We can use DOM API to empty illegal input manually. Or set modal to a value, force dirty check then set it to null again:
$scope.value = 0
$scope.$apply();
$scope.value = null
See https://jsfiddle.net/codefalling/xhcz3Lbj/

optimizing the code by passing the targeted element in AngularJS

I tried to implement the below functionality. There are 2 text boxes. When we type on box 1 the box 2 will also have the value of box 1 and vice versa.
using the same ng-model will do this, but I need to learn how to use elements(references) and identify them in a controller to do this
<body ng-app="myApp" ng-controller="myControl">
Name 1 : <input type="text" ng-model="name1" ng-change="change1()" />
Name 2 : <input type="text" ng-model="name2" ng-change="change2()" >
</body>
var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){
$scope.change1 = function(){
$scope.name2= $scope.name1;
}
$scope.change2 = function(){
$scope.name1= $scope.name2;
}
});
Fiddle of the code
How can I use one function instead of using the two functions change1 and change2( I think if I pass a reference it can be done. But i could not find a way to do that) ?

Just have a look at this code you call same function on ng-change and it works fine
<body ng-app="myApp" data-ng-controller="MainCtrl" id="div1">
Name 1 : <input type="text" ng-model="name1" ng-change="change1(name1)" />
Name 2 : <input type="text" ng-model="name2" ng-change="change1(name2)" />
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope){
$scope.change1 = function(val){
$scope.name2= val;
$scope.name1=val;
}
});
</script>
</body>

By making the the ng-model value structure like object, then Javascript prototypal will do the trick, While you are assigning name1 object to name2 they both will follow the same object, as update in any of the value array will update other. Thats the reason why we don't want such feature then we uses cloning of object, In jQuery its .clone() & in angular its known as angular.copy which creates a new deep copy of the object which will not follow this rule.
Markup
Name 1 : <input type="text" ng-model="name1.value"/>
Name 2 : <input type="text" ng-model="name2.value"/>
Code
var app = angular.module('myApp', []);
app.controller('myControl',function($scope,$http){
$scope.name1= {};
$scope.name2= {};
$scope.name1= $scope.name2; //will update two object according no need of ng-change
});
Forked Fiddle

Get custom HTML attribute value from controller

I have added a custom attribute (cust-property) to a HTML input control,
<input name="myInputName" type="text" ng-model="myModel" cust-property="My Value">
Now I'm trying to get the value of the custom defined attribute from the validation error object list
for (var i in $scope.form.$error.required) {
var elementName = $scope.form.$error.required[i].$name;
//var customPropertyValue = $scope.form.$error.required[i].cust-property;
}
How can I get the custom HTML attribute value from controller?

Try this:
var id = $scope.form.$error.required[i].attributes['cust-property'].value;
But you should also get a try on directive.

Maybe something like this?
HTML:
<input id="myInputName" name="myInputName" type="text" ng-model="myModel" cust-property="My Value" onClick="getCustom()">
JS:
function getCustom() {
var mydiv = document.getElementById('myInputName');
var custom = mydiv.getAttribute("cust-property");
alert(custom);
}