I have no idea what I have done here.
I have this view:
<div class="row" ng-if="!controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="registerForm" ng-submit="controller.register(registerForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': registerForm.email.$invalid && !registerForm.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="registerForm.email.$invalid && !registerForm.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="registerForm.$invalid">Register</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
<div class="row" ng-if="controller.showLoginForm">
<div class="col-md-4 col-md-offset-4">
<form name="form" ng-submit="controller.login(form.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error': form.email.$invalid && !form.email.$pristine }">
<label class="control-label">Email</label>
<input class="form-control" name="email" type="email" ng-model="controller.model.email" required />
<p ng-show="form.email.$invalid && !form.email.$pristine" class="help-block">Enter a valid email address.</p>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.password.$pristine }">
<label class="control-label">Password</label>
<input class="form-control" name="password" type="password" ng-model="controller.model.password" ng-minlength="8" required />
<p ng-show="form.password.$error.minlength" class="help-block">Password is too short.</p>
</div>
<div class="form-group">
<button class="btn-link navbar-btn" type="button" ng-click="controller.showLoginForm = !controller.showLoginForm">Not registered?</button>
<button class="btn btn-primary pull-right" type="submit" ng-disabled="form.$invalid">Login</button>
</div>
</form>
<pre>{{ controller.model | json }}</pre>
</div>
</div>
The issue with this is that the login form works fine....validation and all...but the register form doesn't work at all.
ng-submit does nothing, none of the ng-class fire and ng-disabled doesn't work.
The controller looks like this:
(function () {
'use strict';
angular.module('widget.directives').controller('PkAuthenticateController', PkAuthenticateController);
PkAuthenticateController.$inject = ['pkAuthenticateService'];
function PkAuthenticateController(pkAuthenticateService) {
var self = this;
// Bindings
self.model = { email: '' };
self.showLoginForm = pkAuthenticateService.hasLogin;
// Method binding
self.register = register;
self.login = login;
//////////////////////////////////////////////////
function register(valid) {
if (valid) {
return pkAuthenticateService.register(self.model);
}
};
function login(valid) {
if (valid) {
return pkAuthenticateService.login(self.model);
}
};
};
})();
Can anyone spot what I have done wrong?
<body ng-app="app" ng-controller="queryCtrl">
<form name="queryform" ng-submit="submitQuery(queryform.$valid)" novalidate="">
<legend>SEARCH</legend>
<div class="form-group" >
<label class="col-sm-2 control-label">Criteria 2:</label>
<input type="text" class="col-sm-4 form-control" name="input" ng-model="query.inputfield" required="" />
<p ng-show="queryform.input.$invalid && !queryform.input.$pristine" class="help-block">You name is required.</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled=!queryform.$valid>Submit</button>
</form>
Explain how i can resolve this issue.can any one explain proper validation procedure in angular .check out my plunker
Why ng-show is loading in the first place ?
validation works in this format
ng-show = "formname.inputname.$touched && formname.inputname.$invalid"
if the form is as below
<form name="formname">
<input name="inputname" ng-model="inputName" >
</form>
you can see all properties of an input by writing {{ formname.inputname | json }} in HTML , also if you want to see only error than can use {{ formname.inputname.$error | json }}
see the working plunker
I am trying to create a simple for that then passes the data into a querystring.
ie capturing:
first name
last name
email
Which when submitted with give soemthing like:
http://www.url.com?FirstName=John&LastName=Smith&johnsmith#url.com
I thought I would try 2 way binding and add the querystrings via the action but obviously this gave me an error. I don't need to save this data trust transfer it from a small form to the main application.
I also tried doing this all on submit which works however the link is still clickable when the form is blank. Any suggestions would be very welcome.
<form class="form" name="appForm" novalidate action="https://www.url.com?FirstName={{firstname}}" method="Post">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-11 flowuplabels">
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appfirstname" class="fieldLabel fl_label">
First name<span class="text-danger">*</span>
</label>
<input type="text" name="appfirstname" id="appfirstname" class="form-control fl_input" data-ng-model="firstname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="applastname" class="fieldLabel fl_label">
Last name<span class="text-danger">*</span>
</label>
<input type="text" name="applastname" id="applastname" class="form-control fl_input" data-ng-model="lastname" ng-required />
<span class="form-bar"></span>
</div>
</div>
<div class="form-group has-feedback" show-errors="{ showSuccess: true }">
<div class="fl_wrap">
<label for="appemail" class="fieldLabel fl_label">
Email<span class="text-danger">*</span>
</label>
<input type="email" name="appemail" id="appemail" class="form-control fl_input" data-ng-model="email" ng-required />
<span class="form-bar"></span>
<p ng-show="appForm.appemail.$invalid && !appForm.appemail.$pristine" class="help-block">Enter a valid email.</p>
</div>
</div>
<div class="form-group">
<button id="btnSend" class="btn btn-red" ng-disabled="!firstname || !lastname || !email">Join us</button>
</div>
</div>
</div>
</div>
</div>
</form>
Typical as soon as I ask I solve
should have used get and just put the url ie:
It will then ass the query string using the input name as the query name so much simpler that what I was trying to do
I have a form embedded in a view in my Angular JS 1.2.6 application.
<div class="container" ng-controller="LoginCtrl as signin">
<div class="row">
<div class="col-md-4">
<form name="signin.myForm" novalidate autocomplete="off">
<h1>Sign In</h1>
<div class="form-group" ng-class="{'has-error': (signin.myForm.name.$error.required || signin.myForm.name.$error.minlength) && signin.myForm.name.$dirty}">
<label>Name</label>
<input class="form-control" type="text" name="name" ng-model="signin.myForm.data.name" required ng-minlength="3">
<span class="help-block" ng-show="signin.myForm.name.$error.required && signin.myForm.name.$dirty" >Name is required.</span>
<span class="help-block" ng-show="signin.myForm.name.$error.minlength && signin.myForm.name.$dirty" >Must be at least 3 characters.</span>
</div>
<button class="btn btn-primary" ng-disabled="!signin.myForm.$valid" ng-click="signin.submit()">Sign in</button>
</form>
</div>
with the controller being:
app.controller('LoginCtrl', ['$log',function($log){
var ctrl = this;
ctrl.submit = function(){
console.log(ctrl.myForm);
if(ctrl.myForm.$valid){
console.log('the form is valid');
}
};
}]);
As you can see, to get the form field's data to be part of the same scope as the signin I was taught to first do ng-controller="LoginCtrl as signin" and then I wind up with convoluted names for models and properties like signin.myForm.name.$error.required
Is this the correct way to do it? It seems to work, but although I am a noob this seems like a bit tangled to me. Is this really the best practice?
I think it's more common to see something like this, where you attach things to an injected $scope instead of this, and then you don't have to put a namespace qualifier on the references in the HTML.
<div class="container" ng-controller="LoginCtrl">
<div class="row">
<div class="col-md-4">
<form name="myForm" novalidate autocomplete="off">
<h1>Sign In</h1>
<div class="form-group" ng-class="{'has-error': (myForm.name.$error.required || myForm.name.$error.minlength) && myForm.name.$dirty}">
<label>Name</label>
<input class="form-control" type="text" name="name" ng-model="signin.myForm.data.name" required ng-minlength="3">
<span class="help-block" ng-show="signin.myForm.name.$error.required && myForm.name.$dirty" >Name is required.</span>
<span class="help-block" ng-show="myForm.name.$error.minlength && myForm.name.$dirty" >Must be at least 3 characters.</span>
</div>
<button class="btn btn-primary" ng-disabled="!myForm.$valid" ng-click="submit()">Sign in</button>
</form>
</div>
app.controller('LoginCtrl', ['$scope', '$log',function($scope, $log){
$scope.submit = function(){
console.log($scope.myForm);
if($scope.myForm.$valid){
console.log('the form is valid');
}
};
}]);
I'm pretty new to AngularJS and trying to build a contact form. I did some research to validate with angular, this works fine. However sending the input to my email account is still a mystery.
HTML Snippet
<form name="contactForm" ng-submit="submitForm(contactForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.name.$invalid && !contactForm.name.$pristine }">
<input type="text" name="name" class="form-control" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required>
<p ng-show="contactForm.name.$error.minlength" class="help-block">Je naam lijkt iets te kort, vul ook je achternaam in!</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<input type="email" name="email" class="form-control" ng-model="formData.email" placeholder="Email adres" required>
<p ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block">Voer een geldig email adres in</p>
</div>
<!-- TEL -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.tel.$invalid && !contactForm.tel.$pristine }">
<input type="tel" name="tel" class="form-control" ng-model="formData.tel" placeholder="Telefoonnummer" min-length="10" required>
<p ng-show="contactForm.tel.$error.minlength" class="help-block">Je telefoonnummer lijkt iets te kort, misschien mis je iets als "+31" of "043"</p>
</div>
<!-- TEXT -->
<div class="form-group" ng-class="{ 'has-error' : contactForm.text.$invalid && !contactForm.text.$pristine }">
<textarea name="text" class="form-control" ng-model="formData.text" placeholder="Formuleer uw situatie kort. Geef ook aan op welke dagen u beschikbaar bent of gebeld wenst te worden." ng-minlength="10" required></textarea>
<p ng-show="contactForm.text.$error.minlength" class="help-block">Vertel ons iets meer...</p>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-submit="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak">
<!-- <pre>
{{formData}}
</pre> -->
</form>
Controller
.controller('MainCtrl', function($scope, $http) {
this.features = keys;
$scope.submitForm = function(isValid) {
if (isValid) {
$scope.formData = {};
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
}
};
})
The process.php file is still empty since I'm not quite sure what to put here.
Regarding your form submission setup, you cannot put the ng-submit on any input[type="submit"] elements, instead you put ng-click. Also, according to the angular docs, when you have a ng-submit on the form, and an ng-click on any input[type="submit"] elements, the ng-click handlers will get called first, THEN the ng-submit handler will get called (your controller is set up for the opposite order).
But in your case, two submit handlers is unneccessary, as you can do all your validation with angular directives, and just use an ng-click. Theres an example plunker here.
HTML:
<div ng-controller="MainCtrl">
<form name="contactForm" novalidate>
<!-- NAME -->
<div ng-class="{'form-error':contactForm.name.$dirty && contactForm.name.$invalid, 'form-group':true}">
<input type="text" name="name" ng-model="formData.name" placeholder="Volledige naam" ng-minlength="3" required="" />
<div ng-messages="contactForm.name.$error" ng-show="contactForm.name.$dirty" >
<div ng-message="minlength">Name too short</div>
<div ng-message="required">Required Name</div>
</div>
</div>
<!-- EMAIL -->
<div ng-class="{'form-error':contactForm.email.$dirty && contactForm.email.$invalid, 'form-group':true}">
<input type="email" name="email" ng-model="formData.email" placeholder="Email adres" required />
<div ng-messages="contactForm.email.$error" ng-show="contactForm.email.$dirty">
<div ng-message="email">Invalid Email</div>
<div ng-message="required">Required Email</div>
</div>
</div>
<!-- TEL -->
<div ng-class="{'form-error':contactForm.tel.$dirty && contactForm.tel.$invalid, 'form-group':true}">
<input type="text" name="tel" ng-pattern=/\d{3}-\d{3}-\d{4}/ ng-model="formData.tel" placeholder="Telefoonnummer" required />
<div ng-messages="contactForm.tel.$error" ng-show="contactForm.tel.$dirty">
<div ng-message="pattern">Valid form: XXX-XXX-XXXX</div>
<div ng-message="required">Required Phone</div>
</div>
</div>
<!-- SUBMIT BUTTON -->
<input type="submit" ng-click="processForm()" ng-disabled="contactForm.$invalid" value="Maak afspraak" />
</form>
</div>
JavaScript:
.controller('MainCtrl', function($scope, $http) {
$scope.formData = {};
$scope.processForm = function() {
alert('valid form!')
$http({
method : 'POST',
url : 'process.php',
data : $scope.formData,
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
};
});
Regarding the submission to your email, the $http service will post your data using the http protocol, so you cannot send it directly to you email, as email does not use the HTTP protocol for communication. You Could send the post data to your server, and have the server send the email (e.g. if you use Node you can use nodemailer package to send the email).
Just copy below code in your angularJs Project it will work fine
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row" style="margin-bottom:15px;">
<div class="col-md-12">
<div class="col-md-offset-1 col-md-6" id="box">
<h2 class="colr">Contact Us!</h2>
<hr>
<form class="form-horizontal" name="contactForm" ng-submit="submitContactForm(ContactDetails)" novalidate>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.first_name.$invalid && !contactForm.first_name.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="Name" ng-model="ContactDetails.FirstName" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.first_name.$invalid && !contactForm.first_name.$pristine" class="help-block">Username is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="col-md-12" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="E-Mail Address" ng-model="ContactDetails.Email" class="form-control" type="text" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/">
</div>
<span ng-show="contactForm.email.$invalid && !contactForm.email.$pristine" class="help-block"> Enter a valid email.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.phone.$invalid && !contactForm.phone.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" ng-model="ContactDetails.PhoneNumber" name="phone" ng-maxlength="10" ng-minlength="10" placeholder="9845640899" required>
</div>
<span ng-show="contactForm.phone.$invalid && !contactForm.phone.$pristine">Phone Number is required.</span>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : contactForm.subject.$invalid && !contactForm.subject.$pristine }">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-bookmark"></i></span>
<input name="subject" ng-model="ContactDetails.Subject" placeholder="Enter Subject" class="form-control" type="text" required>
</div>
<span ng-show="contactForm.subject.$invalid && !contactForm.subject.$pristine" class="help-block">Subject is required.</span>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-class="{ 'has-error' : contactForm.comment.$invalid && !contactForm.comment.$pristine }">
<div class="col-md-12 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" ng-model="ContactDetails.Comment" rows="6" name="comment" placeholder="Message" ng-maxlength="255" ng-minlength="10" required></textarea>
</div>
<span ng-show="contactForm.comment.$invalid && !contactForm.comment.$pristine" class="help-block"> Enter a Message.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-warning pull-right" ng-disabled="contactForm.$invalid">Send<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>