*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
Related
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);
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
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
I'm trying to update a database from a form without using any php, I'm using angularjs with MySql
If I use the following with the put method I can insert a user into the data base, I've
http://localhost:8080/CyberSolution/rest/user/register?u=tester&pw=fred&fname=Fred&lname=Smith&email=fred#localhost.com
I've made a basic html form
<form method="POST" action="">
Username: <input type="text" name="username" size="15" /><br />
Password: <input type="password" name="password" size="15" /><br />
email: <input type="text" name="email" size="15" /><br />
First name: <input type="text" name="first_name" size="15" /><br />
Last name: <input type="text" name="lirst_name" size="15" /><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
I'm working with AJS for the first time and also REST for the first time, I'm unsure on how to link the form to the database to update. I'm unsure what needs to go in the controllers.js as well
Thanks
You could simply use the $http service.
First use ng-model to store fields value in an object :
<form ng-submit="send_form()" action="">
Username: <input type="text" name="username" size="15" ng-model="form.username" /><br />
Password: <input type="password" name="password" size="15" ng-model="form.password"/><br />
email: <input type="text" name="email" size="15" ng-model="form.email"/><br />
First name: <input type="text" name="first_name" size="15" ng-model="form.first_name"/><br />
Last name: <input type="text" name="lirst_name" size="15" ng-model="form.last_name"/><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
And then use in your controller (or even better, through a service) :
function myController($scope, $http) {
$scope.send_form = function () {
$http.put('http://localhost:8080/CyberSolution/rest/user/register', $scope.form).success(successCallback);
}
}
I'm setting some form values on an angular form and need to have the validation trigger/set the field to dirty programmatically. The current bug requires the user to actually interact with the form field to trigger the "required" validation and to have it turn green.
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {
FB.api('/me', function(response) {
var scope = angular.element($("#PhotoUploadForm")).scope();
scope.$apply(function(){
scope.user.firstName = response.first_name;
scope.user.lastName = response.last_name;
scope.user.email = response.email;
});
});
And here is the html
<form no-validate id="PhotoUploadForm" name='form' action="/uploaded" enctype="multipart/form-data" method="POST" role="form" ng-controller="Controller">
<div class="col-md-5">
<div class="form-group">
<label class="control-label" for="firstName" >First Name</label>
<input type="text" class="form-control" id="firstName" name="firstName" ng-model="user.firstName" required />
</div>
<div class="form-group">
<label class="control-label" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastName" ng-model="user.lastName" required />
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" ng-model="user.email" required />
</div>
</div>
</form>
You can do it this way:
angular.element('#PhotoUploadForm').scope().user.firstName.$dirty = true
Let me know if it helps.