Angular-Material doesn't load input properly

Angular-Material doesn't load input properly - angularjs

I'm using the library angular-material for my personal project.
I'm trying to use the an input form like the one in the demo.
I think I've included all the library needed here:
...
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css" type="text/css"/>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
...
</head>
<body>
<div ng-app="MyApp" ng-cloak>
<div ui-view></div>
</div>
</body>
And this is my login page
<div class="container page page-login">
<md-content class="form-login">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Login</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="logIn()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Username or email</label>
<input ng-model="user.username">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password</label>
<input ng-model="user.password" type="password">
</md-input-container>
</div>
<div flex layout="row">
<md-checkbox class="remember-me md-primary" name="remember" aria-label="Remember me">
Remember me
</md-checkbox>
<span flex></span>
<md-button type="submit" class="md-raised md-primary">Login</md-button>
<md-button ng-href="/login/google" class="md-raised md-warn fixed-btn-link">Google+</md-button>
</div>
</form>
</div>
</md-content>
<md-content class="form-signup">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>
<span>Do not have an account yet? Signup now!</span>
</h2>
</div>
</md-toolbar>
<br>
<div layout="column">
<form ng-submit="signup()" class="md-inline-form">
<div flex>
<md-input-container class="md-block">
<label>Email*</label>
<input ng-model="new_user.username" required type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Firstname</label>
<input ng-model="new_user.firstname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Lastname</label>
<input ng-model="new_user.lastname" type="text">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Password*</label>
<input ng-model="new_user.password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
</md-input-container>
</div>
<div flex>
<md-input-container class="md-block">
<label>Repeat password*</label>
<input ng-model="new_user.repeat_password" ng-change="show_repeat_password_error = checkRepeatEmail()" required type="password">
<md-caption ng-show="show_repeat_password_error">Passwords must match!</md-caption>
</md-input-container>
</div>
<div flex layout="row" layout-align="center" >
<md-button type="submit" class="md-raised md-primary">Signup</md-button>
</div>
</form>
</div>
</md-content>
</div>
When I visit the page for the first time this is the result where seems
that angular-material works well with button, checkbox and the rest
but it doesn't with the inputs:
However when i reload the page it works properly:
I have this problem also in other pages. What's wrong?
Thanks for your answers.

Related

PayUmoney Integration with angularjs giving Checksum failed error

I am trying to integrate payumoney with angularjs. But it shows error like 'checksum failed'.
controller.js
(function ()
{
'use strict';
angular
.module('app.todo')
.controller('TodoController', TodoController);
/** #ngInject */
function TodoController($document, $mdDialog, $mdSidenav, Tasks, Tags,$scope,$crypthmac)
{
var vm = this;
vm.txnid = "fd3e847h2";
vm.firstname = "Hemanth";
vm.email = "kevinguru888#gmail.com";
vm.phone = "9901996148";
vm.service_provider = "payu_paisa";
vm.productinfo = "steering";
vm.amount = "399.00";
vm.surl = "http://localhost:3000/success";
vm.furl = "http://localhost:3000/failure";
vm.key = "OygoFs";
vm.salt = "BV1QBwCv";
var string = vm.key + '|' + vm.txnid + '|' + vm.amount + '|' + vm.productinfo + '|' + vm.firstname + '|' + vm.email + '|||||||||||' + vm.salt;
vm.hash = $crypthmac.encrypt(string,"");
}
})();
html file
<head>
<script type='text/javascript' src="../bower_components/angular-hmac- sha512/angular-hmac-sha512.js"></script>
</head>
<div id="todo" class="page-layout simple tabbed">
<!-- HEADER -->
<div class="header md-accent-bg" layout="row" layout-align="start center">
<div class="title">
<span class="md-display-1 font-weight-300">PAY U Form</span>
</div>
</div>
<!-- / HEADER -->
<md-content layout-padding>
<div class="innerContent">
<form action='https://test.payu.in/_payment', method='post', name="buyDetailsForm">
<md-content class="md-padding">
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Transaction Id</label>
<input name="txnid" ng-model="vm.txnid">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Name</label>
<input name='firstname' ng-model="vm.firstname">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Email</label>
<input name='email' ng-model="vm.email">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Mobile</label>
<input name='phone' ng-model="vm.phone">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Service Provider</label>
<input name='service_provider' ng-model="vm.service_provider">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Product Info</label>
<input name='productinfo' ng-model="vm.productinfo">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Amount</label>
<input name='amount' ng-model="vm.amount">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Success Url</label>
<input name='surl' ng-model="vm.surl">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Failure Url</label>
<input name='furl' ng-model="vm.furl">
</md-input-container>
</div>
</div>
<div layout="row" layout-align="space-around">
<div flex style="max-width:400px;">
<md-input-container class="md-block">
<label>Key</label>
<input name='key' ng-model="vm.key">
</md-input-container>
</div>
<div flex style="max-width:400px;">
<md-input-container class="md-block" flex-gt-sm>
<label>Hash</label>
<input name='hash' ng-model="vm.hash">
</md-input-container>
</div>
</div>
</md-content>
<div layout="row" layout-align="end center">
<md-button class="md-raised md-primary" ng-click="vm.cancel()">Cancel</md-button>
<md-button class="md-raised md-primary" ng-click="vm.submit(buyDetailsForm)">Place Order</md-button>
</div>
</form>
</div>
</md-content>
</div>
The error shows like "SORRY! We were unable to process your payment Checksum Failed".

This error occurrs when hash and passing value in form doesn't match.
If you are passing 2 udf then you must also send it in form with name.
And if you are passing the same but still got the same error, then it is because of the problem in generation in hash. You are using $crypthmac but it doesn't create perfect hash, to create either use or own sha512 algorithm, or use an API, to create the perfect hash. You can check that hash created by $crypthmac is not that perfect that PayUMoney decrypt it perfectly, that's why it returns error. Just check has generated with $crypthmac and <?php echo hash('sha512', 'text') ?> you can get the difference.

ng-messages dont reset when resetting the form

I have a big problem in my form when I try to reset it everything is reset except the ng messages. I tried everything but nothing worked. I don't know why
Here is my form:
<md-content layout-padding>
<form name="projectForm">
<div layout="row">
<md-input-container flex="50">
<label>Name</label>
<input required name="clientName" ng-model="project.clientName" ng-focus="">
</md-input-container>
<md-input-container flex="50">
<label>Email</label>
<input required type="email" name="clientEmail" ng-model="newEmployee.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="projectForm.clientEmail.$error" role="alert" ng-show="message">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="50">
<label>Mobile</label>
<input required name="clientName" ng-model="newEmployee.mobile">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Address</label>
<input required name="clientName" ng-model="newEmployee.address">
<div ng-messages="projectForm.clientName.$error" ng-show="message">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required md-no-asterisk name="description" ng-model="newEmployee.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
</div>
</md-input-container>
<div>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
<md-button ng-click="cancel()">Cancel</md-button>
</div>
</form>
</md-content>
and here is my reset function in the controller
$scope.reset = function() {
$scope.projectForm.$setPristine();
$scope.projectForm.$setValidity();
$scope.projectForm.$setUntouched();
}

Angular js Cannot read property '$setPristine' of undefined

<!--TypeError:``Cannot read property '$setPristine' of undefined
at n.$scope.add(lay.js: 22)
at fn(eval at compile(angular.js: 14432), < anonymous > : 4: 200)
at b(angular.js: 15485)
at e(angular.js: 25018)
at n.$eval(angular.js: 17229)
at n.$apply(angular.js: 17329)
at HTMLButtonElement. < anonymous > (angular.js: 25023)
at Qf(angular.js: 3456)
at HTMLButtonElement.d(angular.js: 3444)(anonymous
function)# angular.js: 13550(anonymous
function)# angular.js: 10225$apply# angular.js: 17334(anonymous
function)# angular.js: 25023Qf# angular.js: 3456d# angular.js: 3444-- >
angular.module('myApp', ['ngMaterial']).controller('myCtrl', function($scope) {
$scope.userlist = [];
$scope.userlist = function(user) {
console.log(user)
if (user && user.firstname) {
$scope.userlist.push({
firstname: user.firstname,
lastname: user.lastname,
DOB: user.dateofbirth,
email: user.mail,
password: user.paswd,
repass: user.paswdtwo
});
$scope.add();
}
};
$scope.add = function() {
$scope.user = {};
$scope.userForm.$setPristine();
$scope.userForm.$setUntouched();
};
});
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- <script type="text/javascript" src= "layout.js"></script> -->
<script type="text/javascript" src="lay.js"></script>
</head>
<body>
<form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
<div ng-app="myApp" ng-controller="myCtrl">
<div layout="column" layout-align="center center">
<md-card>
<div layout-gt-sm="row">
<md-input-container class="md-block">
<label>First Name</label>
<input name="firstname" ng-model="user.firstname" required>
<div ng-show="userForm.$submitted || form.firstname.$touched">
<div ng-show="userForm.firstname.$error.required">your first Name.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Last Name</label>
<input name="lastname" ng-model="user.lastname" required>
<div ng-show="userForm.$submitted || form.lastname.$touched">
<div ng-show="userForm.lastname.$error.required">Enter last name</div>
</div>
</md-input-container>
</div>
<md-input-container>
<label>DOB</label>
<md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
<div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
<div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input name="mail" type="email" ng-model="user.mail" required>
<div ng-show="userForm.$submitted || form.mail.$touched">
<div ng-show="userForm.mail.$error.required">Enter email ID</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Password</label>
<input name="paswd" type="Password" ng-model="user.paswd" required>
<div ng-show="userForm.$submitted || form.paswd.$touched">
<div ng-show="userForm.paswd.$error.required">Enter your password</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Re-type Password</label>
<input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
<div ng-show="userForm.$submitted || form.paswdtwo.$touched">
<div ng-show="userForm.paswdtwo.$error.required"></div>
</div>
</md-input-container>
<md-card-action layout="row" layout-align="center">
<md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>
</md-card-action>
<md-card-content>
<span ng-repeat="x in lag">
<span ng-bind="x.firstname" ></span>
</span>
</md-card-content>
</md-card>
</div>
</div>
</form>
</script>
</body>
</html>

The <form> tag is outside the ng-app/ng-controller attribute lines. Angular won't be able to access $scope.userForm in your $scope.add function.

$scope.add=
function(userForm put form object)
{
$scope.user={};
};

HTML changes:
<md-button class="md-raised md-primary" ng-click="add(userForm)">Signup</md-button>
Angular changes:
$scope.add=function(userForm){
$scope.user={};
userForm.$setPristine();
userForm.$setUntouched();
};
userForm is not in $scope, you need to pass to add function.
:)

Your form tag is outside the controller in HTML
is outside the controller scope so use this
<div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" novalidate role="form" ng-submit="userForm.$valid && userlist(user)">
<div layout="column" layout-align="center center">
<md-card>
<div layout-gt-sm="row">
<md-input-container class="md-block" >
<label>First Name</label><input name="firstname" ng-model="user.firstname" required>
<div ng-show="userForm.$submitted || form.firstname.$touched">
<div ng-show="userForm.firstname.$error.required">your first Name.</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Last Name</label><input name="lastname" ng-model="user.lastname" required>
<div ng-show="userForm.$submitted || form.lastname.$touched" >
<div ng-show="userForm.lastname.$error.required">Enter last name</div>
</div>
</md-input-container>
</div>
<md-input-container>
<label>DOB</label>
<md-datepicker ng-model="user.dateofbirth" name="dateofbirth" required></md-datepicker>
<div ng-show="userForm.$submitted || form.dateofbirth.$touched ">
<div ng-show="userForm.dateofbirth.$error.required">Enter DOB</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Email</label><input name="mail" type="email" ng-model="user.mail" required>
<div ng-show="userForm.$submitted || form.mail.$touched">
<div ng-show="userForm.mail.$error.required">Enter email ID</div>
</div>
</md-input-container>
<md-input-container class="md-block" >
<label>Password</label><input name="paswd" type="Password" ng-model="user.paswd" required>
<div ng-show="userForm.$submitted || form.paswd.$touched">
<div ng-show="userForm.paswd.$error.required">Enter your password</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Re-type Password</label><input name="paswdtwo" type="Password" ng-model="user.paswdtwo" required>
<div ng-show="userForm.$submitted || form.paswdtwo.$touched">
<div ng-show="userForm.paswdtwo.$error.required"></div>
</div>
</md-input-container>
<md-card-action layout="row" layout-align="center">
<md-button class="md-raised md-primary" ng-click="add()">Signup</md-button>
</md-card-action><md-card-content>
<span ng-repeat="x in lag">
<span ng-bind="x.firstname" ></span>
</span>
</md-card-content>
</md-card>
</div>
</form>
</div>
This may solve ur problem

Angular ng-form with ng-repeat new form start as invalid

I have view that contains list of people to add, each row represent a person, each row is an item in array of persons (people), I do repeat with ng-rpeat on this array, my issue when I add new row or load page the fileds start invalid even with novalidate, And any row have invalid input the fields become invalid.
The code :
HTML:
<ng-form name="pplForm" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" ng-model="person.Email" name="email">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>
Code inside controller:
var vm = this;
vm.people = People; // its resolved and come from backend could be {} initially.
vm.addPerson = addPerson;
vm.removePerson = removePerson;
if (!vm.company.People || vm.company.People.length === 0) {
addPerson();
}
function addPerson() {
if (!vm.company.People) {
vm.company.People = [];
}
vm.company.People.push({ Status : 'added'});
}
function removePerson(index) {
if (getActivePersons().length > 1) {
var person = vm.company.People[index];
// If is new person no need to send it at all.
if (person.Status && person.Status === 'added') {
vm.company.People.splice(index, 1);
} else { // If has status (or empty cuz is no action done before), then it need to be handeled from backend too.
vm.company.People[index].Status = 'deleted';
}
}
}

I just added the names for fileds, and postfix it with {{$index}} and this solved the all problems that I was have:
<ng-form name="pplForm_{{$index}}" flex layout="row" layout-sm="column" layout-align="start center" ng-repeat="person in vm.company.People" ng-if="person.Status != 'deleted'">
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">First Name</label>
<input required name="firstName_{{$index}}" ng-model="person.FirstName">
<div ng-messages="editCompanyForm.firstName.$error">
<div ng-message="required">First Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Last Name</label>
<input required name="lastName_{{$index}}" ng-model="person.LastName">
<div ng-messages="editCompanyForm.lastName.$error" >
<div ng-message="required">Last Name is required.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Phone Number</label>
<input name="phone_{{$index}}" required ng-model="person.PhoneNumber" ng-pattern="/^([0-9]{3}) [0-9]{3}-[0-9]{4}$/">
<div ng-messages="editCompanyForm.phone.$error">
<div ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="start center" flex="20">
<md-input-container class="pb-0">
<label class="md-subhead">Email Address</label>
<input required minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" ng-model="person.Email" name="email_{{$index}}">
<div ng-messages="editCompanyForm.email.$error">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Invalid e-mail address.
</div>
</div>
</md-input-container>
</div>
<div layout="column" layout-align="end start" flex="15">
<md-button class="md-icon-button md-warn" type="button"
ng-click="vm.removePerson($index)" aria-label="Remove Person">
<md-icon md-font-icon="icon-minus-circle"></md-icon>
</md-button>
</div>
</ng-form>

Angular Materials flex box model not apply correctly

I am working with angualar and angular material and I am trying to create something linke this -> http://gyazo.com/51b99edb716687f6096e4cff7d009e8d
but for some reason my image (logo) stretches over de width, this is what I have now -> http://gyazo.com/277f2bcf6b47861412d8e5df949d8313
I can't even seem to get it in the middle of the screen
If any one can help me out and get me going with this flex box model I would appreciate it
this is my code:
<div layout="row" flex layout-padding layout-fill layout-align="center center">
<div flex="40" flex-lg="50" flex-md="70" flex-sm="100">
<md-card>
<md-toolbar>
<div>
<div><img src="../images/logo.png" alt="Zazzle logo"></div>
<h1 class="md-headline">
Sign up
</h1>
</div>
</md-toolbar>
</md-card>
</div>
</div>

To center something add a div with layout="row" and within the div add a <span flex></span> before and after the div you are trying to center.
This is how I do it for my login page to center the input divs. I am still trying to learn myself, so I am not sure if it is the right way or not but you can surely try it:
<div layout="row">
<span flex></span>
<div class="well" flex='30'>
<form ng-submit="vm.login()" name="loginForm">
<md-input-container>
<label>Email</label>
<input type="text" ng-model="vm.email" required/>
<div ng-messages="loginForm.email.$error" ng-if='loginForm.email.$dirty'>
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" ng-model="vm.password"/>
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
</form>
</div>
<span flex></span>
</div>
Hope this helps :)