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();
}
Related
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.
I am working on md-input-container and I am trying change default asterisk color to red.
Plz take a look here
pen link
<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
<md-input-container class="md-block">
<label>Description</label>
<input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.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 layout="row">
<md-input-container flex="50">
<label>Client Name</label>
<input required="" name="clientName" ng-model="project.clientName">
<div ng-messages="projectForm.clientName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50">
<label>Project Type</label>
<md-select name="type" ng-model="project.type" required="">
<md-option value="app">Application</md-option>
<md-option value="web">Website</md-option>
</md-select>
</md-input-container>
</div>
<md-input-container class="md-block">
<label>Client Email</label>
<input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/">
<div ng-messages="projectForm.clientEmail.$error" role="alert">
<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>
<md-input-container class="md-block">
<label>Hourly Rate (USD)</label>
<input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" ng-pattern="/^1234$/">
<div ng-messages="projectForm.rate.$error" multiple="" md-auto-hide="false">
<div ng-message="required">
You've got to charge something! You can't just <b>give away</b> a Missile Defense
System.
</div>
<div ng-message="min">
You should charge at least $800 an hour. This job is a big deal... if you mess up,
everyone dies!
</div>
<div ng-message="pattern">
You should charge exactly $1,234.
</div>
<div ng-message="max">
{{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
doubt even Bill Clinton could afford that.
</div>
</div>
</md-input-container>
<div>
<md-button type="submit">Submit</md-button>
</div>
<p style="font-size:.8em; width: 100%; text-align: center;">
Make sure to include ngMessages module when using ng-message markup.
</p>
</form>
The asterisk's default color is gray right next to"Client Name" label.(if you click the field, its color changes to red.) Is there any way that I can change the default color of the asterisk from gray to red?
thanks in advance,
Add the following to your CSS :
md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
color:red;
}
For some reason just giving the following does not work :
label.md-required:after {
color:red;
}
I want to implement a 'same as above' mailing address and permanent address. But then i tick on the checkbox, it does not show that the mailing address and permanent address are the same. help?
controller
$scope.candidateData.MailingAddress = {};
$scope.$watch('mailingSameAsPermanent', function (value) {
if (value) {
$scope.candidateData.Address = $scope.candidateData.MailingAddress;
} else {
$scope.candidateData.Address = angular.copy($scope.candidateData.Address);
}
partial HTML:
<h3>Permanent Address</h3>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.Address.Address1">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.Address.Address2" placeholder="Address 2">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option> <!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
<h3>Mailing Address</h3>
<md-checkbox ng-model="mailingSameAsPermanent" >
Tick if your mailing address is the same as your permanent address
</md-checkbox>
<div>
<md-input-container class="md-block">
<label>Address</label>
<input name="add" ng-model="candidateData.MailingAddress.Address1" ng-disabled="mailingSameAsPermanent">
<div ng-messages="CandidateDetails.add.$error">
<div ng-message="required">
Please enter your address
</div>
</div>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input ng-model="candidateData.MailingAddress.Address2" placeholder="Address 2" ng-disabled="mailingSameAsPermanent">
</md-input-container>
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Country</label>
<md-select ng-model="candidateData.Address.Country">
<md-option>
<!--ng-repeat="country in countries" value="{{country.Country}}"-->>
{{candidateData.Address.Country}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Zip Code</label>
<input name="postalCode" ng-model="candidateData.Address.Zip" placeholder="12345"
required ng-pattern="/^[0-9]{5}$/">
<div ng-messages="CandidateDetails.postalCode.$error" role="alert" multiple>
<div ng-message="required" class="my-message">You must supply a zip code.</div>
<div ng-message="pattern" class="my-message">
That doesn't look like a valid postal
code.
</div>
</div>
</div>
</div>
I've implemented the functionality the way you want to achieve but in different approach.
You can check out below link to understand.
https://jsfiddle.net/alpeshprajapati/U3pVM/23941/
$scope.permanent = {address:'helloworld', state: 'gujarat'};
$scope.click = function(){
if($scope.sameasabove){
$scope.mail = angular.copy($scope.permanent);
} else {
$scope.mail = {};
}
};
You need to implement this in your code.
Try this one
<input type="checkbox" ng-model="sameas" ng-click="!sameas?permanentAddress=presentAddress:permanentAddress={}" />
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>
I'm dealing with md-tabs-wrapper it gives the partial view of each category and a single save button as follow
The existing code for it
<md-dialog aria-label="Profile edit" class="profile-edit full-height">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Edit Profile</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="hide()">
<md-icon md-font-icon="icon-close" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content >
<md-tabs class=" margin-bottom-40" md-dynamic-height md-border-bottom>
<md-tab label="Profile">
<div layout layout-sm="column">
<md-input-container flex="30">
<label>First Name</label>
<input type="text" ng-model="user.firstName">
</md-input-container>
<md-input-container flex>
<label>Last Name</label>
<input type="text" ng-model="user.lastName">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="30">
<label>Other Name</label>
<input type="text" ng-model="user.otherName">
</md-input-container>
<md-select flex class="md-select-form" ng-model="user.gender" placeholder="Gender" ch-boolean>
<md-option ng-value="gender" ng-repeat="gender in ['Male', 'Female']">{{gender}}</md-option>
</md-select>
<md-input-container flex>
<label>Date of Birth</label>
<input type="date" ng-model="user.dateOfBirth">
</md-input-container>
</div>
<md-input-container>
<label>Profile Picture</label>
<input type="file" name="file" file-model = "user.myFile">
</md-input-container>
<md-input-container flex>
<label>Summary(max 200 characters)</label>
<textarea ng-model="user.description" md-maxlength="200"></textarea>
</md-input-container>
</md-tab>
<md-tab label="Experience" ng-init="">
<h2>Employment</h2>
<div ng-repeat="experience in user.experiences">
<md-input-container>
<label>Job title</label>
<input type="text" ng-model="experience.job_title">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="experience.company_name">
</md-input-container>
<md-input-container flex="33">
<label>Location</label>
<input type="text" ng-model="experience.location_name">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex="40">
<label>Start Date</label>
<input type="date" ng-model="experience.date_start" date-ob>
</md-input-container>
<md-input-container flex="40" ng-if="experience.current_work==0">
<label>End Date</label>
<input type="date" ng-model="experience.date_end" date-ob>
</md-input-container>
<md-checkbox flex ng-model="experience.current_work" ng-true-value='1' ng-false-value='0' aria-label="Current" style="margin: 5px;">
Current
</md-checkbox>
</div>
<md-input-container flex>
<label>Job Description </label>
<textarea ng-model="experience.job_des" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Position</md-button>
</md-tab>
<h2 class="md-subhead">Projects</h2>
<div>
<md-input-container>
<label>Project Title</label>
<input type="text" ng-model="user.jobtitle">
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex="66">
<label>Employeer Name </label>
<input type="text" ng-model="user.employeer">
</md-input-container>
<md-input-container flex>
<label>Start Date</label>
<input type="date" ng-model="user.startDate">
</md-input-container>
<md-input-container flex>
<label>End Date</label>
<input type="date" ng-model="user.endDate">
</md-input-container>
</div>
<md-input-container flex>
<label>Project Details </label>
<textarea ng-model="user.jobDescription" ></textarea>
</md-input-container>
</div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">Add Projects</md-button>
</md-tab>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Number</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Number</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<div layout layout-sm="column">
<md-input-container flex>
<label>Primary Email</label>
<input type="text" ng-model="user.primaryNumber">
</md-input-container>
<md-input-container flex>
<label>Secondary Email</label>
<input type="text" ng-model="user.secondaryNumber">
</md-input-container>
</div>
<h2 class="md-subhead">Social Media Links</h2>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-facebook-squre" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
<md-input-container md-no-float>
<md-icon md-font-icon="icon-location-on" style="display:inline-block;"></md-icon>
<input ng-model="user.address" type="text" placeholder="Url" >
</md-input-container>
</md-tab>
</md-tabs>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="hide()" class="md-primary">
Cancel
</md-button>
<md-button ng-click="answer(this)" class="md-primary">
Save
</md-button>
</div>
</form>
</div>
</md-dialog>
In my controller i have coded to save the each tabs content as it is
$scope.answer = function(answer) {
console.log(answer);
Profile.editProfilePro($scope.user);
Profile.editProfileExp($scope.user.experiences[0]);
$mdDialog.hide(answer);
};
I want to execute the Profile.editProfileExp($scope.user) only if current view in experience
The problem is how to save the current view tabs contents only in controller answer()?? Tell me your suggestions. Thanks .
you can have a scope variable as tabsdata for active tab, so that you can identify the selected Tab and add attribute "active="tabsdata.ExperienceTab" to you html "md-tab" tag it would provide you the active Tab status, and based on your selected tab execute your code.