I'm new to angularJS
i'm try to create a registration form using angularJS
but when i press submit it doesn't work.
The ng-disable attribute is working
HTML
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-contoller="EditUserController">
<form name="registerUser" class="form">
<legend>Register</legend>
<div class="form-group">
<label for="inputFirstname">First Name :</label>
<input type="text" name="firstname" id="inputFirstname" class="form-control" value="" required title="" placeholder="First Name" ng-model="user.firstname">
</div>
<div class="form-group">
<label for="inputLastName">Last Name :</label>
<input type="text" name="lastname" id="inputLastName" class="form-control" value="" required title="" placeholder="Last Name" ng-model="user.lastname">
</div>
<div class="form-group">
<label for="inputUsername">UserName :</label>
<input type="text" name="username" id="inputUsername" class="form-control" value="" required title="" placeholder="Username" ng-model="user.username">
</div>
<div class="form-group">
<label for="inputEmail">Email :</label>
<input type="email" name="email" id="inputEmail" class="form-control" value="" required title="" placeholder="your email" ng-model="user.email">
</div>
<button class="btn btn-primary" ng-disabled="registerUser.$invalid" ng-click="saveuser(user,registerUser)" >Submit</button>
</form>
</div>
EditUserController.js
motobike.controller('EditUserController',
function EditUserController($scope){
$scope.saveuser = function(user, register){
console.log(register);
if (register.$valid) {
window.alert('suceess');
}
}
}
);
app.js
'use strict';
var motobike = angular.module('motobike', ['ngSanitize']);
change ng-contoller to ng-controller ^^
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-contoller="EditUserController"
should be
class="col-xs-8 col-sm-8 col-md-8 col-lg-8 well" ng-controller="EditUserController"
^^
Related
Using the following form with required tags does not actaully validate my input, and always alerts "ok", what am I missing?
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputFirstName">Förnamn</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="Förnamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputLastName">Efternamn</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Efternamn" required/>
</div>
<div class="form-group col-sm-4">
<label for="inputPhone">Telefon</label>
<input type="text" class="form-control" id="inputPhone" placeholder="Telefon"/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-4">
<label for="inputMobile">Mobiltelefon</label>
<input type="text" class="form-control" id="inputMobile" placeholder="Mobiltelefon"/>
</div>
<div class="form-group col-sm-8">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="inputCompany">Företag</label>
<input type="text" class="form-control" id="inputCompany" placeholder="Företag" required/>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-3 pull-right" data-bind="click: submit">Submit</button>
</form>
Javascript, where i want to alert "ok" if validation passes:
vm.submit = function(){
alert("ok");
};
Hey everyone am trying to make a validation for a form with AngularJS in Thymeleaf
<form name="registerForm" novalidate="">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>Lastname *</label>
<input id="lastname" type="text" ng-model="lastname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Firstname *</label>
<input id="firstname" type="text" ng-model="firstname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date of birth *</label>
<input id="birth" type="date" ng-model="brith" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>email *</label>
<input id="email" type="text" ng-model="email" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Username *</label>
<input id="user" type="text" ng-model="user" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Acount Type *</label>
<select ng-model="accout" class="form-control" required="required" >
<option selected="">StartUp</option>
<option>Entreprise</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.pass.$invalid, 'has-success': registerForm.pass.$valid}">
<label>Password *</label>
<input id="pass" name="pass" type="text" ng-model="pass" ng-minlength="6" class="form-control" required="required" />
<span class="text-danger" ng-show="registerForm.pass.$error.minlength">Password Too Short</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.confpass.$invalid, 'has-success': registerForm.confpass.$valid}">
<label>Confirm Password *</label>
<input id="confpass" name="confpass" type="text" ng-model="confpass" class="form-control" equals-to="registerForm.pass" required="required" />
<span ng-show="!registerForm.confpass.$error.required && registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger pull-right" >Sign Up</button>
</div>
</div>
</div>
</form>
This actually work in a simple HTML Page in Thymeleafi get this kind of error
The entity name must immediately follow the '&' in the entity reference
i've tried replacing the && with &&
the form validation wont work , am not having any errors but i don't think that the conditions are correct.
Thymeleaf Doesn't Support &&.
You use 'and' instead of '&&'.
For Example :
<span ng-show="!registerForm.confpass.$error.required and registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>
I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!
The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}
I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>
You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>