On my html page i have 5 6 different field for form
<input type="text" class="form-control" ng-model="edit.TIME"placeholder="Time" maxlength="30" ng-required="true" />
<input type="text" class="form-control" ng-model="edit.NAME" placeholder="Time" maxlength="30" ng-required="true" />
<input type="text" class="form-control" ng-model="edit.Place"placeholder="Time" maxlength="30" ng-required="true" />
<input type="text" class="form-control" ng-model="edit.LASTNAME" placeholder="Time" maxlength="30" ng-required="true" />
How i can call each ng-model with $ watch. If any thing change $ watch will show change value. on My controller side
$scope.old.NAME="ABC";
$scope.$watch('edit', function (Value) {
if ($scope.old.NAME != $scope.edit.NAME) {
$scope.old.NAME.append($scope.edit.NAME)
}
Call watch with true as the third argument:
$scope.$watch('edit', function(newVal, oldVal){
console.log(newVal);
}, true);
Related
I am building my first angular app and looking to post my form into my JSON data.
This is my form:
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl" ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="type" ng-model="type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
</form>
</span>
And this is my app.js:
(function(){
var volkswagenApp = angular.module('volkswagenapp',[]);
volkswagenApp.controller('VolkswagenCtrl', [ '$http' , function($http){
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function(data){
vw.gegevens = data;
});
}]);
volkswagenApp.controller('FormController',function(){
this.gegevens={};
/* this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
vw.gegevens.push(this.gegeven);
this.gegeven = {};
}
});
})();
Can somebody tell me where I am going wrong? I did the same steps as they do on codeschool.
Since you are using controllerAs you need to add the controller object to all the variables in ng-model
Example:
<input name="type" ng-model="type">
Should be:
<input name="type" ng-model="autoctrl.type">
However you can make it simpler to post a single object by making all the ng-model's properties of the same parent
<input name="type" ng-model="autoctrl.myFormModel.type">
Then when you are ready to post you simply send myFormModel
$http.post(url, this.myFormModel).then(....
Note that you should store a reference to this so you can use that reference inside any callbacks. I see you using vm but it is not defined anywhere inside FormController
See John Papa Angular Style guide
How can one input be the same value as another input via angularjs? I know how to do this via jquery but not in angularjs. Here is my code:
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
<script type="text/javascript">
var peopleApp = angular.module('peopleApp', []);
peopleApp.controller('myController', function(){
$scope.input = {
'username': $scope.input.user_code
}
});
</script>
So basically what I want is the first input element to be the same value as the second input element
use ng-blur or ng-change
<body ng-app="peopleApp">
<div ng-controller="myController">
<input class="form-control input-form" ng-blur="input.username = input.user_code" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.username" name="username" type="text" required>
</div>
</body>
The answer above works, but if you want it to update in real time, just use the same model:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<input class="form-control input-form" ng-model="input.user_code" name="username" type="text" required>
When you change one of the two, the other will update as well. You can also use this as any other tag. For example, this will show what you type on the <p> tag:
<input class="form-control input-form" ng-model="input.user_code" name="user_code" type="text" maxlength="4" minlength="4" required>
<p> {{ input.user_code }} </p>
*It is not a question, i share a solution *
I need to access to my FORM from my controller to valid some input accroding to it value ( example, the ISO code should be in my ISO code list ... )
The question is not about how to valid or check the form or input but how to access to form properties ( $valid / $error etc), not to the input value (use ng-model for that )
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
Actually there is another way without using $parent:
<form autocomplete="off" name="formLocalisation">
<input type="text" placeholder='Code ISO'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-blur="validLocalisationField(this)"
ng-model="specimen.countrycode" />
</form>
you just have to initialize the form:
$scope.formLocalisation = {};
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity("countrycode_valid", false);
} else {
$scope.formLocalisation[field].$setValidity("countrycode_valid", true);
}
};
After searchs and headache i share a solution that i found
You need to put $parent in the form name ! :
<form autocomplete="off" name="$parent.formLocalisation">
<input type="text" placeholder='countrycode'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countrycode"
ng-change="validLocalisationField('countrycode')"
ng-model="countrycode" />
<input type="text" placeholder='country name'
class="form-control input-md"
ng-minlength="2" ng-maxlength="3" name="countryname"
ng-change="validLocalisationField('countryname')"
ng-model="countryname" />
</form>
In the controller you can access to the form with $scope.formLocalisation:
$scope.validLocalisationField = function (field) {
if ( .... ) {
$scope.formLocalisation[field].$setValidity(field+"_valid", false);
} else {
$scope.formLocalisation[field].$setValidity(field+"_valid", true);
}
};
source = http://forum.ionicframework.com/t/cant-access-form-on-scope/679/18
I use 2 Inputs to define an age. Both values should be passed to a new input which is alread binded to rule.data. Is that possible? I'm new with angularjs and probably I have a flaw. Thanks for your tips
HTML
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" value="between {{age.from}} and {{age.to}}" />
I do not really understand why you want to use an <input> to format a text with the values of min and max.
You would rather do this, no ?
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<span>between {{age.from}} and {{age.to}}</span>
Does this work for you ?
If the string is just a placeholder for the user age value, you should do this instead :
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" placeholder="between {{age.from}} and {{age.to}}" />
If you need to get the final string into the model, you can do something like this then:
<input type="number" class="form-control input-sm" min="1" max="110" ng-model="age.from"/>
<input type="number" class="form-control input-sm" min="1" max="110" ng-mdodel="age.to"/>
<input type="text" class="form-control input-sm" ng-model="rule.data" ng-init="rule.data = 'between ' + age.from + ' and ' + age.to" />
(I assume you do not have a controller to initialize the model properly.
If you do, then just add this kind of line inside : $scope.rule.data = 'between ' + $scope.age.from + ' and ' + $scope.age.to;. it should do the trick.)
can vary with many solutions, you can add a custom filter at third combined result ,
<input type="text" class="form-control input-sm" ng-model="rule.data | customFilter:age.from:age.to" value="between {{age.from}} and {{age.to}}" />
app.filter('customFilter',function(){
return function(input ,fromage,toage){
//your code for between
return //your calculated age
}
});
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo