Form Closing Tag Not Showing In Console - angularjs

its very strange that i am closing the form input field tags but even though i didn’t find it in console.even my form value didn't getting posted.
here is my code
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<div class="form-group">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group" />
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
Edited::
<div class="form-group">
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
</div>

i have solved my issue.
what i was doing i was trying to get the data in ng-value.
But when i try to bind data in my ng-model i get the solution
js
$scope.perupdate= {
firstname: key.firstname,
lastname : key.lastname,
phone : key.phone,
location : key.location,
};
view
<input type="text" class="form-control full" ng-model="perupdate.firstname">

Related

AngularJs Form validation when select radio buttons

Hi i am learner in angularJS and in my form i have name and email fields and one radio group for gender selection and my requirement is when i select male then name field is required and if i select female then email field is required
I have tried below code but its not working can some one help me please
code:
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name">Employee Name:</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email">Email Address:</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
autofocus required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid>Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="male" ng-model="empInfo.gender" #gender="ng-model">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="female" ng-model="empInfo.gender" #gender="ng-model">Female
</label>
</div>
</form>
Maybe try with that validation:
HTML :
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name" ng-show="empInfo.gender != male_value">Employee Name is required</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email" ng-show="empInfo.gender == male_value">Email Address is rquired</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid">Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="male_value" ng-model="empInfo.gender">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="female" ng-model="empInfo.gender" >Female
</label>
</div>
</form>
JS:
$scope.male_value = 'male';
plunker: http://plnkr.co/edit/Hi5t1gU5TIdNx670wHo1?p=preview

AngularJS Form Validation and Submit

Codepen link: http://codepen.io/anon/pen/mVyPaw
Need to create an angular app (w/ 1 controller) that validates that this form has all three fields filled out & Submit button can only be enabled if the form is valid. Don't need to use the preprocessors.
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>
</form>
</div>
Actually it's module inject problem. ng-app="myApp" ng-controller="formCtrl" Where is your myApp module code.
try like this.
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>
Add required validation
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="myForm" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>
</form>
</div>
Here is your edited CodePen

Custom Form Validation Not working in angularjs

I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle
I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>

Chrome is auto filling a form with the wrong data

I have a form on my register page that allows a user to create their account. If the create account request is successful my angular redirects the user to the login view. When the user lands here it auto fills the username/email field with the last name from the previous form.
I am not quite sure why though. The forms both have the same id's and name values so I am very confused on the chrome auto-filling.
Found something out, after registering an account the user is redirected to the login page. It auto fills the lastname into the username box then populates the password correctly. However if you clear the lastname out and login using the proper credentials it updates that Google Save Locker record and from that point on works correctly.
Here are visual examples of what I am seeing.
Registration:
Filling out form so you can see the last name value
Getting redirected to login page after registration:
The UI chrome displays after landing on login page
Link to page for live example:
Website link : app.baileysproject.com
Register form:
<form class="form-horizontal" id="RegisterForm">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="stuff.Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="FirstName">First Name</label>
<div class="col-md-4">
<input id="FirstName" name="FirstName" type="text" placeholder="First Name" class="form-control input-md" ng-model="stuff.FirstName" required="">
<span class="help-block">Your first name</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="LastName">Last Name</label>
<div class="col-md-4">
<input id="LastName" name="LastName" type="text" placeholder="Last Name" class="form-control input-md" ng-model="stuff.LastName" required="">
<span class="help-block">Your last name</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-match="stuff.Password" ng-model="stuff.Password" required="">
<span class="help-block">Enter a strong password</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cPassword">Confirm Password</label>
<div class="col-md-4">
<input id="cPassword" name="cPassword" type="password" placeholder="Password" class="form-control input-md" ng-model="stuff.ConfirmPassword" required="">
<span class="help-block">Enter the same password again</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="CreateAccount" name="CreateAccount" ng-click="CreateAccount()" class="btn btn-info">{{AccountCreatedValue}}</button>
</div>
</div>
</fieldset>
</form>
Login form:
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-model="Password" required="">
<span class="help-block">Strong Password</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="Login" name="Login" ng-click="Login()" class="btn btn-info">Login</button>
</div>
</div>
</fieldset>
</form>

Angularjs validation not working correctly on form

I have below form:
<form name="commentForm" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" >Enter Name:</label>
<div class="col-sm-10" show-errors>
<input type="text" class="form-control" id="name" name="name" ng-model="subject.name" placeholder="Enter Name" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="comment">Enter comment:</label>
<div class="col-sm-10" show-errors>
<textarea class="form-control" rows="5" id="comment" name="comment" ng-model="subject.text" style="resize: none;" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button ng-click="submitForm()" type="submit" class="btn btn-default" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
I have created showErrors directive to show error for required-fields.
But this form validation is not working properly. Although if I am using the same code in some other partials, it is working fine. What could be the possible mistake that I am making here?

Resources