As seen here:
https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
for example, how to access the template var:
{{myForm.input.$valid}}
in the controller?
$scope.myForm.input.$valid
doesnt do it
You can add $watch to $scope.myForm.input.$valid.
Here is working example.
<script>
angular.module('test', [])
.controller('formController', ['$scope', function($scope) {
$scope.myForm = {};
$scope.$watch('myForm.input.$valid', function(newVal) {
$scope.valid = newVal;
});
}]);
</script>
<form name="myForm" ng-controller="formController">
Email: <input type="email" name="input" ng-model="text" required>
{{ myForm.input.$valid }}
{{ valid }}
</form>
Related
I created edit form so I have to include default value for each text field. I wrote this HTML code:
<input type="text" ng-model="projectData.title" ng-init="projectData.title=title" name="title" class="form-control" />
In controller:
$scope.title = "This is just title";
It shows nothing in the text box. I tried ng-init="projectData.title={{title}}" and ng-init="projectData.title='title'" but it's just not working.
I'm using angularjs 1.6 and the following solution is not working too.
http://jsfiddle.net/Aejvm/337/
In your scope, you should declare the object like so:
$scope.projectData = {};
$scope.projectData.title = "This is just title";
Check This [Code][1]
[1]: http://jsfiddle.net/d4ts76ys/
Use the object to map it to ng-model
Well you are doing a little wrong.
ng-init is angular directive and you dont need curly braces.
modify your code to this :
html:
<div ng-controller="MyCtrl">
<input type="text" ng-init="rootFolders.name=name" ng-
model="rootFolders.name" >
<br>rootFolders={{name}}
</div>
js:
var app = angular.module('myApp',[]);
app.controller('MyCtrl', function($scope) {
$scope.name = "Acunisasi";
});
I have created fiddle that may help your
jsfiddle
//html
<div ng-controller='MyCtrl'>
<form>
<input ng-init="projectData.title = title" type="text" ng-model="title">
<button ng-click="formSubmit()">
submit
</button>
</form>
{{title}}
</div>
//js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', MyController]);
function MyController($scope) {
$scope.projectData = {};
$scope.title = 'This is just title';
$scope.formSubmit = function() {
console.log("$scope.projectData ===>", $scope.projectData)
}
}
I am not able to get the $valid method working on the form. I need to get this working for the form validation, not sure where I am going wrong. Here is the angular code below where I am trying to write the output to the console.
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
console.log('is email valid? ' + myform.$valid)
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form name="myForm" novalidate ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<label>Email:</label>
<input type="email" ng-model="email"/>
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
</body>
Try like this
HTML
ng-submit="submit(myForm)"
JS
$scope.submit = function(form) {
console.log(form.$valid)
}
I have a form such as
Html:
<form ng-submit="log(user)">
<input type="text" ng-model="user.firstname">
<input type="text" ng-model="user.lastname
</form>
Angular:
.controller ('', function ($scope){
$scope.log = function (user){
console.log (user.firstname)
}
})
This was working before but now it throws cannot read property user.firstname
Please help me. Thank you
AngualarJs is rich in two way data binding. You didn't need to pass the scope object user in the function log. Its available in controller always with updated value. Just Initialise the user as scope object and try the code
In html:
<form ng-submit="log()">
<input type="text" ng-model="user.firstname" />
<input type="text" ng-model="user.lastname" />
</form>
In Js
.controller ('', function ($scope){
$scope.user = {}; // Declare here
$scope.log = function (){
console.log ($scope.user.firstname);
}
})
if user parameter is undefined you can't access firstname on undefined value, You can try below snippet to solve your problem.
.controller ('', function ($scope){
$scope.log = function (user){
if(user){ //Strict Check: toString.call(user) == "[object Object]"
console.log (user.firstname)
}
}
})
This is full working example, somewhat similar to yours.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Please try this.
Thanks
Amit
Remove below code
ng-submit="log(user)"
and remove button type submit
and add below line
<input type="button" ng-click="log()"/>
Your js file
$scope.log=function(){
console.log($scope.firstname);
console.log($scope.lastname);
}
I am new to angular js and I am struck with accessing the form element in ng-submit function.
My intention is to set the action attribute dynamically and submit the form rather using jquery selector and setting the action attribute.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction(myForm)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (formElement) {
//Set action attribute ???
//Submit the form ????
};
}]);
Thanks for ur help. Finally found a solution.
<div ng-app="MyApp">
<form name="myForm" ng-controller="myController"
ng-submit="SubmitFunction($event)">
<input type="submit" value="Submit" />
</form>
</div>
JS:
var myApp = angular.module("MyApp",[]);
myApp.controller("myController", ["$scope", function ($scope) {
$scope.SubmitFunction = function (e) {
var formElement = angular.element(e.target);
formElement.attr("action", actionLink);
formElement.submit();
};
}]);
I need to check if a form is valid in a controller.
View:
<form novalidate=""
name="createBusinessForm"
ng-submit="setBusinessInformation()"
class="css-form">
<!-- fields -->
</form>
In my controller:
.controller(
'BusinessCtrl',
function ($scope, $http, $location, Business, BusinessService,
UserService, Photo)
{
if ($scope.createBusinessForm.$valid) {
$scope.informationStatus = true;
}
...
I'm getting this error:
TypeError: Cannot read property '$valid' of undefined
Try this
in view:
<form name="formName" ng-submit="submitForm(formName)">
<!-- fields -->
</form>
in controller:
$scope.submitForm = function(form){
if(form.$valid) {
// Code here if valid
}
};
or
in view:
<form name="formName" ng-submit="submitForm(formName.$valid)">
<!-- fields -->
</form>
in controller:
$scope.submitForm = function(formValid){
if(formValid) {
// Code here if valid
}
};
I have updated the controller to:
.controller('BusinessCtrl',
function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
$scope.$watch('createBusinessForm.$valid', function(newVal) {
//$scope.valid = newVal;
$scope.informationStatus = true;
});
...
Here is another solution
Set a hidden scope variable in your html then you can use it from your controller:
<span style="display:none" >{{ formValid = myForm.$valid}}</span>
Here is the full working example:
angular.module('App', [])
.controller('myController', function($scope) {
$scope.userType = 'guest';
$scope.formValid = false;
console.info('Ctrl init, no form.');
$scope.$watch('myForm', function() {
console.info('myForm watch');
console.log($scope.formValid);
});
$scope.isFormValid = function() {
//test the new scope variable
console.log('form valid?: ', $scope.formValid);
};
});
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>
<form name="myForm" ng-controller="myController">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<tt>userType = {{userType}}</tt><br>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
/*-- Hidden Variable formValid to use in your controller --*/
<span style="display:none" >{{ formValid = myForm.$valid}}</span>
<br/>
<button ng-click="isFormValid()">Check Valid</button>
</form>
</body>
</html>
The BusinessCtrl is initialised before the createBusinessForm's FormController.
Even if you have the ngController on the form won't work the way you wanted.
You can't help this (you can create your ngControllerDirective, and try to trick the priority.) this is how angularjs works.
See this plnkr for example:
http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview
I like to disable the save/submit button if the form is invalid:
<form name="ruleForm">
<md-input-container>
<label>Priority</span>
<input name="description" ng-model="vm.record.description" required>
</md-input-container>
<md-button ng-click="vm.save()" ng-disabled="ruleForm.$invalid" class="md-primary md-raised">Save</md-button>
</form>