I have a multi step angular form using ui.router. I have a form html file that loads each step as a view. Each step has a button with a ui-sref link that takes the user to the next step. However it wont show the html 5 validation hints unless I remove the ui-sref. How can I have the validation work while still triggering the ui-sref at the same time?
my main form view:
<form ng-submit="processForm()" name="mortgage">
<div class="row">
<!-- our nested state views will be injected here -->
<div id="form-views" class="small-12 columns" ui-view></div>
</div>
</form>
my view html:
<h3>Please provide some information about your property</h3>
<label for="name">Zip Code</label>
<input type="text" pattern="[0-9]{5}" class="form-control" name="zipcode" type="number" ng-model="formData.zipcode" placeholder="Zip Code" required>
<button ui-sref="form.verify" type="submit" class="next">Next</button>
my controller
angular
.module('angularApp', [
'rzModule',
'btford.modal'
'ui.router'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/form/property-type');
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'FormCtrl'
})
.state('form.info', {
url: '/property-info',
templateUrl: 'views/property-info.html'
})
.state('form.verify', {
url: '/property-verify',
templateUrl: 'views/property-verify.html'
})
.controller('FormCtrl', function($scope) {
$scope.formData = {};
$scope.processForm = function() {
console.log($scope.formData);
};
});
Related
I have the following code structure
index.html
<body ng-app="jobPortalApp" ng-controller="mainController">
<div ui-view></div>
</body>
then following is my homepage.html template
<div id=header>
</div>
<div ui-view>
<input type="text" ng-model="test">Test</input>
<input type="submit" ng-click="signup()">
</div>
<footer>
</footer>
my angular module file is as follows
var jobPortalApp = angular.module('jobPortalApp',['ui.router']);
jobPortalApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',
{
url:'/',
templateUrl: './templates/homepage.html',
controller: 'controllerHome'
})
}).controller('mainController', function(){});
following is my home controller
jobPortalApp.controller('controllerHome',function($scope, $http) {
$scope.test="";
$scope.signup = function() {
console.log($scope.test);
}
});
Required:
I want the changed value of test in my controllerHome after the user clicks on signup
Problem:
console.log outputs blank and if I remove $scope.test="";then outputs undefined. I want the changed value of test in my controller.
You usually shouldn't bind directly to $scope due to issues with prototypal inheritance. When trying to read a value from a child scope, if the value doesn't exist you end up reading from the parent scope. But as soon as you write, you write to the child scope. Does it work if you bind to an object instead?
$scope.data = {
test: ""
};
<input type="text" ng-model="data.test">Test</input>
As an alternative, you may also want to look at the controllerAs option for your route:
controllerAs: "ctrl"
Then in your controller:
this.test = "";
And in your template:
<input type="text" ng-model="ctrl.test">Test</input>
I am trying to get the ng-model value from html to controller and getting undefined.
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="uname">User Name</label>
<div class="col-md-7">
<input type="text" ng-model="login.user.name" id="uname" class="username form-control input-sm" placeholder="User name" required ng-minlength="3"/>
</div>
</div>
</div>
<button type="button" ng-click="login.getUser(login.user.name)" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Login</button>
In Controller I am using the below code,
function getUser(name){
console.log('User Name --> '+$scope.login.user.name+" "+$scope.name+" "+self.user.name +$scope.userName+" "+name);
return LoginService.getUserByName(name);
}
In app.js I am using controller,
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/list',
controller:'UserController',
controllerAs:'ctrl',
resolve: {
users: function ($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
}).state('login', {
url: '/login',
templateUrl: 'partials/login',
controller: 'loginController',
controllerAs:'login'
});
$urlRouterProvider.otherwise('/');
}]);
I am getting undefined in console. Please suggest why I am not able to receive the value.
As i see in your code you using controllerAs syntax. so in your controller probably using var self = this;
to access models in controller use this
console.log('User Name --> '+self.user.name);
The full source code.
I don't understand why $scope not working in my LoginGuideCtrl controller. I try click on login button and should show a <p> with new data but the $scope is not updating...
Don´t forget I'm trying to achieve a modular design.
I have the following code:
guides.js
var guides = angular.module('main.guides', ['ui.router']).config(function ($stateProvider) {
$stateProvider.
state('guides.login', {
url: '/login',
templateUrl: 'modules/guides/views/login.html',
controller: 'LoginGuideCtrl'
}).
...
state('guides.mobile', {
url: '/web',
template: '<div>guildes mobile</div>',
controller: 'ListCtrl'
});
});
controller.js
var guides = angular.module('main.guides');
guides.controller('IndexCtrl', function() {
console.log('Index');
})
.controller('LoginGuideCtrl', function($scope) {
console.log('feck');
$scope.checkLogin = function(){
$scope.message = "Welcome "+$scope.name+"!"
};
})
.controller('ListCtrl', function() {
console.log('List');
})
login.html
<div class="form-group col-sm-2">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" ng-model="name">
</div>
<div class="form-group col-sm-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" ng-model="password">
</div>
<button type="button" class="btn btn-default" ng-click="checkLogin()">Login</button>
<p ng-model="message"></p>
ng-model is used with <input> tags to capture user input, by two way binding with your model value.
Since a <p> tag does not collect user input, it won't work with ng-model. Instead just do a one way binding with the value using the curly brackets:
<p>{{message}}</p>
The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.
index.html
<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
<head> ....
</head>
<body class="home-page">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
signup.html
<div class="form-container col-md-5 col-sm-12 col-xs-12">
<form class="signup-form">
<div class="form-group email">
<label class="sr-only" for="signup-email">Your email</label>
<input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
</div>
<!--//form-group-->
<div class="form-group password">
<label class="sr-only" for="signup-password">Your password</label>
<input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
</div>
<!--//form-group-->
<button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
<p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
<p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
</p>
</form>
</div><!--//form-container-->
app.js
angular
.module('mainApp', [
'services.config',
'mainApp.signup'
])
.config(['$urlRouterProvider', function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}])
signup.js
'use strict';
/**
* #ngdoc function
* #name mainApp.signup
* #description
* # SignupCtrl
*/
angular
.module('mainApp.signup', [
'ui.router',
'angular-storage'
])
.config(['$stateProvider', function($stateProvider){
$stateProvider.state('signup',{
url: '/signup',
controller: 'SignupCtrl',
views: {
'header': {
templateUrl: '/pages/templates/nav.html'
},
'content' : {
templateUrl: '/pages/signup/signup.html'
},
'footer' : {
templateUrl: '/pages/templates/footer.html'
}
}
});
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {
$scope.user = {};
$scope.createUser = function() {
$http({
url: 'http://localhost:3001/users',
method: 'POST',
data: $scope.user
}).then(function(response) {
store.set('jwt', response.data.id_token);
$state.go('home');
}, function(error) {
alert(error.data);
});
}
});
There is a working plunker. Firstly, check this Q & A:
Are there different ways of declaring the controller associated with an Angular UI Router state
Where we can see, that
controller does not belong to state. It belongs to view!
This should be the state definition:
$stateProvider.state('signup',{
url: '/signup',
//controller: 'SignupCtrl',
views: {
'header': {
templateUrl: 'pages/templates/nav.html'
},
'content' : {
templateUrl: 'pages/signup/signup.html',
controller: 'SignupCtrl',
},
'footer' : {
templateUrl: 'pages/templates/footer.html'
}
}
});
Check it here
You need a template to bind a controller.
In the docs ui-router Controllers
Controllers
You can assign a controller to your template. Warning: The controller
will not be instantiated if template is not defined.
I am working on node app using angularjs and cassandra.
when i go to page such as register page then front end is coming appropriately but it is showing error that controller is undefined.
Error: error:areq
Bad Argument
this is app.js (main js configuring file)
angular.module('app', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: '/browser/views/home.html'
})
.state('register', {
url: '/register',
templateUrl: '/browser/views/register.html',
controller: 'RegisterCtrl'
})
.state('login', {
url: '/login',
templateUrl: '/browser/views/login.html',
controller: 'LoginCtrl'
})
}
]);
this is register.html file followed by the path of controller.
<div ng-controller="RegisterCtrl" class="container-fluid">
<div class="row custom-row2">
<div class="col-md-6 col-lg-6 col-sm-6">
<h4 class="sign_up">{{ title }}</h4>
<form class="form-horizontal" id="login_form" name="login_form" role="form">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name:</label>
<div class="col-sm-9">
<input ng-model="name" type="text" class="form-control" name="field1" id="name" aria-describedby="inputSuccess3Status" placeholder="Enter Your Name....">
</div>
</div>
</form>
</div>
</div>
this is the registerCtrl.js file which is coming on checking in firebug
angular.module('app', ['ui.router'])
.controller('RegisterCtrl', ['$scope',
function($scope, RegiserService) {
$scope.title = "Sign Up";
}
]);
but title which has to come from the registerCtrl controller is not coming and {{ title }} is coming in that place.
i have gone through several times through this but didn't able to get what is going wrong in defining controller.
You are recreating the module again by doing angular.module('app', ['ui.router']).controller. Just use the getter syntax angular.module('app') to get the module once the app has been created. I am assuming you are doing the same while registering the service RegiserService which cleans up anything else registered to the same module app. Once the module has been created by using the syntax angular.module('moduleName', [..dep]) you should just get the module with the getter syntax angular.module('app') while registering any other subsequent entities.
Module creation (Just once):
angular.module(moduleName, [requires], [configFn]);
Module Getter (to access already created module):
angular.module(moduleName);
See documentation
When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.
So for example:-
angular.module('app').controller('RegisterCtrl',...
angular.module('app').service('RegiserService',...
Along with redefining module as mentioned by PSL,
One more point is - what is RegiserService? If it is some service then the definition of controller is wrong.
correct definition is
angular.module('app', ['ui.router'])
.controller('RegisterCtrl', ['$scope', 'RegiserService',
function($scope, RegiserService) {
$scope.title = "Sign Up";
}
]);