I am trying to display one piece of form data, the username, on the right side of the same page the form is present in (without page refresh). I want this to happen as soon as I hit submit. For this miniapp, there is no backend (not even local storage).
The following is the markup for the right-side of the page:
The userArray is defined on the scope and has the usernames pushed into it.
<div class="index-right">
<p ng-repeat="user in userArray">
{{ user }}
</p>
</div>
This is my main module and controller:
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope){
$scope.userArray = [];
console.log($scope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$scope.userArray.push($scope.formData.username);
}
console.log($scope.userArray);
};
});
Currently, the usernames aren't showing up on the front page. Although, they are being pushed into the userArray (I am consoling out the array on the browser). Any help on how to proceed would be greatly appreciated.
I am adding the whole index.html here:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="practichemApp">
<header class="index-header"><h1>Registration Page</h1></header>
<hr>
<div class="index-left" ng-controller="MainCtrl">
<form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid && !practichemForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required>
<p ng-show="practichemForm.username.$invalid && !practichemForm.username.$pristine" class="help-block">Username is required</p>
<p ng-show="practichemForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="practichemForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid && !practichemForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="formData.email" required>
<p ng-show="practichemForm.email.$invalid && !practichemForm.email.$pristine" class="help-block">Please Enter a valid email.</p>
</div>
<!-- PASSWORD -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid && !practichemForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/" required>
<p ng-show="practichemForm.password.$error.minlength" class="help-block">Password needs to be at least 8 characters long.</p>
<p ng-show="practichemForm.password.$error.maxlength" class="help-block">Password is too long.</p>
<p ng-show="practichemForm.password.$error.pattern" class="help-block">Password needs at least one integer, one lowercase letter and one uppercase letter.</p>
</div>
<!-- PASSWORD CONFIRMATION -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required && !practichemForm.passwordConfirm.$pristine }">
<label>Password (confirmation)</label>
<input type="password" name="passwordConfirm" class="form-control" ng-model="formData.passwordConfirm" ui-validate="'$value == formData.password'" ui-validate-watch="'formData.password'" ng-minlength="8" ng-maxlength="20" required/>
<p ng-show="practichemForm.passwordConfirm.$error.ui-validate && practichemForm.passwordConfirm.$dirty && practichemForm.passwordConfirm.$error.required">Passwords don't match.</p>
</div>
<br><br>
<button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid">Submit</button>
</form>
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your element that you want to use to show your data it outside of the scope of the place that has the data.
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
You can use a service to share the information, or put the userArray on a higher scope (like $rootScope, or move the ng-controller to a element that wraps both.
$rootScope being the easiest.. try this:
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ $root.user }}
</div>
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope, $rootScope){
$rootScope.userArray = [];
console.log($rootScope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$rootScope.userArray.push($scope.formData.username);
}
console.log($rootScope.userArray);
};
});
You have your ng-repeat out of the controller scope
I created a plunker for you example (removed some fields for simplicity)
http://plnkr.co/edit/7skU1lBIU5Gy7bJ0Htgh?p=preview
Moved this inside so that it is under mainctrl's
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
Related
I want to check pattern check if input field length > 0 how can i do this .
expectation
when input field empty showing required message(touched)
After start typing need to check pattern if pattern is not match need to show Please Enter Valid Input and if input field length 0 need to show only required message
(function(angular) {
'use strict';
angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>
<div ng-app='ngMessagesExample'>
<!-- App goes here -->
<form name="test" novalidate ng-submit="test.$valid && submit()">
<div layout-gt-md="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Number</label>
<input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
<div ng-messages="test.number.$error">
</div>
<div ng-messages="test.$error" ng-show="test.number.$dirty">
<div ng-message="required">number is required</div>
</div>
<span ng-show="!test.number.$valid">Please Enter Valid Input</span>
</md-input-container>
</div>
</form>
</div>
demo
help me out
i have updated the code in HTML
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app='ngMessagesExample'>
<!-- App goes here -->
<form name="test" novalidate ng-submit="test.$valid && submit()">
<div layout-gt-md="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Number</label>
<input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
<div ng-messages="test.number.$error">
</div>
<div ng-messages="test.$error" ng-show="test.number.$dirty"><div ng-message="required">number is required</div></div>
<span ng-show="test.number.$error.pattern">Please Enter Valid Input</span>
</md-input-container>
</div>
</form>
</div>
</body>
</html>
I want to show some hint text below an input if the input has no errors on $error. So either show hint text, or show error message if there is an error.
I have tried using combinations of ngShow/Hide and $valid/$invalid but I can't seem to get it to work the way I need it to.
<div ng-form="reg.form" name="reg.form" novalidate>
<md-input-container flex="100">
<label>{{"views.application.mobile.label" | translate}}</label>
<input type="tel" ng-model="reg.user.mobile" name="mobile" required
ng-pattern="/(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/">
<div ng-show="???" class="hint">e.g. 0400123123</div>
<div ng-messages="reg.form.mobile.$error">
<p class="help-block" ng-message="required">{{"views.application.mobile.error.required" | translate}}</p>
<p class="help-block" ng-message="pattern">{{"views.application.mobile.error.invalid" | translate}}</p>
</div>
</md-input-container>
</div>
I would use $untouched in combination with $error. $untouched will display the hint initially. Validation errors will kick in on blur. From this point on, since the field is "touched", the hint will be displayed unless input is invalid. In your case, something like this should work:
<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
class="hint">
e.g. 0400123123
</div>
See this demo it will help you: http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview
'Error message' will be shown if the field is empty otherwise 'hint message' will be shown. Below is the related HTML & JS code
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="userForm" novalidate>
<label>
First Name: <br/>
<input name="firstname" type="text" ng-model="user.firstName" required><br />
<span class="error" ng-show="userForm.firstname.$error.required">Please enter First name<br /></span>
<span class="hint" ng-show="!userForm.firstname.$error.required">Hint: First name cannot left blank<br /></span><br />
</label>
<label>
Last Name: <br/>
<input name="lastname" type="text" ng-model="user.lastName" required><br />
<span class="error" ng-show="userForm.lastname.$error.required">Please enter Last name<br /></span>
<span class="hint" ng-show="!userForm.lastname.$error.required">Hint: Last name cannot left blank<br /></span><br />
</label>
<button ng-click="submitUser()">Submit</button> <button>Cancel</button>
</form>
<pre>{{ user|json }}</pre>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.isSubmitted = false;
$scope.submitUser = function() {
$scope.isSubmitted = true;
};
});
I want to autofocus the first input inside ngRepeat when my page loads and when I add a new item to array the focus should go for the last item of the ngRepeat and so on, doesn't matter how many items I add.
Here's my code actually:
<div class="add-top" ng-show="showstep=='step2'" style="position:relative;width:100%;">
<form name="EmailForm" novalidate accessible-form autocomplete="off" ng-submit="checkDup() && EmailForm.$valid ? Add() :''">
<div class="white text-center ">
<!-- && (emailDel | filter:'':true).length == emailDel.length -->
<div class=" bg-color-upload03 ticket-top">
<div class="col-md-12 " ng-init="emailDel=[1]">
<div class="newevent-nav01">
Enter email ids</div>
<div class="col-md-6 col-md-offset-3" ng-repeat="e in emailDel track by $index">
<input type="email" class="text-left" placeholder="Email ID" validate-email ng-model="emailDel[$index]" ng-init="emailDel[$index]=''" ng-required="emailDel.length==1" name="email_{{$index}}" id="email_{{$index}}">
<div class="col-md-2 col-md-offset-10 text-left" style="margin-top: -10px;" ng-show="(emailDel.length-1)==$index">
<img src="../../../path to + symbol-active icon" width="40%" ng-hide="(EmailForm.$valid && emailDel[ds.emailDel.length-1] !='')" />
<img src="../../..path to +symbol gray icon" width="40%" class="cursor-poi" ng-click="(EmailForm.$valid && emailDel[emailDel.length-1] !='') ? emailDel.push(emailDel.length+1) :''" ng-show="(EmailForm.$valid && emailDel[emailDel.length-1] !='')" />
</div>
<div class="col-md-12">
<span class="error" ng-show="EmailForm['email_'+$index].$touched && !EmailForm['email_'+$index].hasFocus">
<span ng-show="EmailForm['email_'+$index].$error.required">
Required
</span>
<span ng-show="EmailForm['email_'+$index].$error.email">
Invalid Email
</span>
<span ng-show="emailDel[$index]!='' && (emailDel | filter:emailDel[$index]:true).length>1">
Duplicate Email
</span>
</span>
</div>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="col-md-10 col-md-offset-1">
<button type="submit" class="btn" ng-disabled="EmailForm.$invalid || (emailDel.length>1 && (emailDel | filter:'':true).length==emailDel.length)">Continue</button>
</div>
</div>
</div>
</div>
</form>
</div>
You can create your own directive for this.
When it loads you set focus to the $first element of your ngRepeat, when you starts to add elements, the focus should go to the $last.
Here's a snippet working:
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.email = ['test1#gmail.com', 'test2#hotmail.com', 'test3#stackoverflow.com'];
$scope.init = true;
$scope.add = function() {
$scope.email.push('');
$scope.init = false;
}
})
.directive('setFocus', function() {
return {
scope: {
setFocus: '='
},
link: function(scope, element) {
if (scope.setFocus) element[0].focus();
}
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<form name="delEmailForm" novalidate accessible-form autocomplete="off" ng-submit="testing() && delEmailForm.$valid ? Add() :''">
<div class="col-md-6 col-md-offset-3 text-center" ng-repeat="e in email track by $index">
<input type="email" set-focus="init ? $first : $last" class="inputbox-text-left" placeholder="Email ID" validate-email ng-model="email[$index]" ng-required="email.length==1 " name="email_{{$index}}" id="email_{{$index}}">
</div>
<button type="button" value="add" ng-click="add()">+</button>
</form>
</body>
</html>
Following is my code
// LoginCtrl.js
angular.module('homeon', [ 'ngMessages' ]).controller('loginCtrl',
function($rootScope, $scope, $state, $ionicLoading, dbservices, server) {
//--------------------------------- my code-------------
})
<!-- login.html-->
<link href="css/login.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css">
<!-- load angular -->
<script src="http://code.angularjs.org/1.4.3/angular.js"></script>
<!-- load ngmessages -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- load our custom app -->
<script src="js/loginCtrl.js"></script>
<body ng-app="homeon">
<ion-view view-title="Login">
<ion-content>
<form name="loginForm" ng-submit="doLogin(loginForm)" novalidate="">
<div class="list list-inset">
<label class="item item-input itemLabel">
<input type="email" name="username" placeholder="Email" ng-model="username" required="required" ng-minlength="5" >
</label>
<label class="item item-input itemLabel">
<input type="password" name="password" placeholder="Password" ng-model="password" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[A-Z])(?=.*[!##$%^&*]).{8,}" autocapitalize="off" autocomplete="off" autocorrect="off">
</label>
<div ng-messages="loginForm.username.$error" style="color:red; align:center">
<span ng-message="required">Please enter user name</span>
<span ng-message="minlength">Length of email must be minimum 5 characters</span>
<span ng-message="email">Please enter valid email</span>
<div>
</div ng-messages="loginForm.password.$error" style="color:red; align:center">
<span ng-message="required">Please enter password</span>
<span ng-message="pattern">The passwords must be at least 8 characters and include an
uppercase, lowercase, number, and special character</span>
</div>
<button type="submit" class="button button-block" ng-click="" >Login</button>
</div>
</form>
</ion-content>
</ion-view>
</body>
I am getting 'ngMessages' not instantiated error in browser. Can you please let me know where am I doing wrong or why I am getting this error?
Thanks in advance.
Include <script src="js/angular-messages.js"></script> In your index.html page
I've a mistake with input type url in angularjs. I would disable the button if input is empty or invalid and I wrote the code below. Well, it's fine on the first time o if I write an incorrect url but if it's empty propForm.imgUrl.$invalid and propForm.imgUrl.$error.url it returns me false and this enable click of button
<div class="col-sm-10">
<input type="url" name="imgUrl" ng-model="$parent.urlImage" class="form-control">
</div>
<div class="pull-right col-sm-2">
Add
</div>
Where is the trick?a
The quickest way is adding required to input please see demo below.
var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="homeCtrl">
<form name="propForm">
<div class="col-sm-10">
<input type="url" name="imgUrl" ng-model="$parent.urlImage" class="form-control" required>
</div>
<div class="pull-right col-sm-2">
Add
</div>
</form>
</div>
</div>