Why form field stays filled after upgrading to AngularJS 1.3 - angularjs

I used an AngularJS 1.2 application with a classic log-in/log-out function, ant it worked well.
When I log out, I make some basic operations then a redirection to log-in page ($state.go('app.login');)
However, the login page is loaded with the username and password already filled, which is pretty annoying :) It didn't occur with AngularJS 1.2.
Here is the login form:
<form name="LoginForm"
autocomplete="off"
ng-submit="validate_login(email, password)">
<div class="list">
<label class="item item-input my-item">
<input name="email"
ng-model="email"
type="email"
required
placeholder="E-mail">
</label>
<label class="item item-input my-item">
<input name="password"
ng-model="password"
type="password"
required
placeholder="Mot de passe">
</label>
</div>
<button class="button" type="submit">
Connexion
</button>
</form>
Here is the content of the log out controller:
$scope.logout_user = function() {
Auth.clearCredentials();
$state.go('app.login');
}
Thanks.

Related

Trouble getting two separate forms, (on different pages), to work on Netlify with Gatsby

The Netlify site name is: https://southsidepaint-prototype.netlify.app
I am using React with Gatsby and Sass, all up to date with the latest versions.
I have a simple contact form on the contact page (’/contact’) that looks like this:
<form name="contact-form" method="POST" data-netlify="true" >
<input type="hidden" name="form-name" value="contact-form" />
<div className={ctSty.formGroup}>
<input name="name" type="text" placeholder="Name" required/>
</div>
<div className={ctSty.formGroup}>
<input name="email" type="email" placeholder="Email" required />
</div>
<div className={ctSty.formGroup}>
<input name="phone" type="tel" placeholder="Phone Number" required/>
</div>
<div className={ctSty.formGroup}>
<textarea name="message" placeholder="Write your message"></textarea>
</div>
<button type='submit' value="Submit">Send message</button>
</form>
Now this form above is submitting correctly, didn’t work with a honeypot or recaptcha but that’s ok. The problem is when I click to submit my other form which exists on a separate page (’/careers’), I receive no 404 errors, no warnings, nothing happens. I check the deploy log for warnings too, only had one warning: “warning undefined”; I’m not sure where this particular warning comes from but it existed before the forms were added, so I think that’s ok too. Netlify is able to see that I have a second form, I have the folders on my forms page but nothing is being submitted in spam or verified. I have scoured through the docs, videos and articles but cannot pin down a fix.
Things I have tried:
I have even reduced my second form down to three simple inputs, name, email and phone number and still the same result.
I have changed the name attribute in my form multiple times, cleared the cache on deploy.
changed the name from “form-name” in my
<input type="hidden" name="form-name" value="applicationsV2" />
Added an “onSubmit” to the form
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
The second form’s code is below:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationsV2" />
{/* FULL NAME */}
<div className={crSty.formGroup}>
<label for="name" required>
<span><CgAsterisk /></span> Full Name <br/>
<input name="Full_name" type="text" placeholder="e.g. Phillip Anthropy" required/>
</label>
</div>
{/* EMAIL ADRRESS */}
<div className={crSty.formGroup}>
<label for="email" required>
<span><CgAsterisk /></span> Email Address <br/>
<input name="Contact_email" type="email" placeholder="e.g. user#email.com" required />
</label>
</div>
{/* PHONE NUMBER */}
<div className={crSty.formGroup}>
<label for="phone" required>
<span><CgAsterisk /></span> Phone Number <br/>
<input name="Contact_phone" type="tel" placeholder="e.g. 555-0000" required/>
</label>
</div>
</form>
<div style={{textAlign:'center'}}>
<button type='submit' value="submit">SubmitApplication</button>
</div>
You have a typo in your second form (applicationV2). While in the form name appears applicationV2, in the value of the form-name field is applicationsV2. It should be:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationV2" />
Keep in mind that with your previous snippet your form was in a kind of limbo because there wasn't a match between forms names so, the data was sent but never caught by any Netlify form. Fixing the typo should fix your issue too.
For further logs, check the Network tab in the inspector tools to see whats Netlify returning in the form response.

passing array from from view to another with angularJS

I have a view contain this form, I need to display this new user after clicking the save button on another page/view in the HTML table. Any help, please!
<form ng-submit="adduser()">
<label class="lbl" >First name:</label>
<input type="text" ng-model="newuser.fName"><br>
<label class="lbl" >Last name:</label>
<input type="text" ng-model="newuser.lName"><br>
<label class="lbl" >Age:</label>
<input type="number" ng-model="newuser.age"><br>
<label class="lbl" >Gender:</label><br>
<input type="radio" name="gender" value="Male" ng-model="newuser.selectVal"><label >Male</label> <input type="radio" name="gender" id="fml" value="Female" ng-model="newuser.selectVal"><label>Female</label><br>
<label class="lbl" >About user:</label><br>
<textarea ng-model="newuser.about" id="txtarea" ng-model="newuser.about"></textarea><br>
<button type="submit">Save</button>
<button id="clear">Clear all</button>
</form>
If you want to show the user data in next router page, You can take help of AngularJS service and AngularJS Factory By using them you can pass the data one page to another page
But
If you want to show the data that is completly next browser Tab then you can use $sessionStorage and $localStorage in angular
Also check this link

How to enable/disable button with validation in Angular JS

Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp

data-ng-trim="false" is not working in angular

My html is
My html is
<form name="signInForm" novalidate="">
<div class="form-group has-feedback has-feedback-left">
<label class="control-label sr-only">Email address</label>
<input type="email" class="form-control" name="username" placeholder="Email address" required="" data-ng-model="user.username" data-ng-trim="false"/>
</div>
<div class="form-group clearfix">
<div class="pull-right">
<button type="submit" class="btn btn-primary submit-button" data-ng-click="signIn()">
<span class="submit-button-text">Sign in</span>
</button>
</div>
</div>
</form>
Controller :
$scope.signIn = function(isValid) {
$log.log("username is" + $scope.user.username + $scope.user.password);
}
when I clicked sign in button , mu user name white spaces are trim off. But I want that white spaces in my user name should retain so that I can track it and displayed error message.
So I used 'data-ng-trim = false' .
But it seems its not working.
Please help.
Unfortunately there ng-trim doesn't apply to input type="email". What you can do is change the input to type="text" in order to use the ng-trim, but this solution is not ideal.
See the Angular documentation for input type=email
You have to use ng-trim="false":
<input type="email" class="form-control" name="username"
placeholder="Email address" required=""
data-ng-model="user.username"
ng-trim="false"/>
If it is not working for you, please update you angularjs version here.

Doing AngularJS validation without making use of form element?

Is it possible to make use of the angularJS validation tools without wrapping the controls in a form, and what would this be called?
Normal angularjs form validation example:
<form name="form" class="form-validation">
<p class="text-muted">Please fill the information to continue</p>
<div class="form-group">
<label>Username <em class="text-muted">(allow 'a-zA-Z0-9', 4-10 length)</em></label>
<input type="text" class="form-control" ng-model="user.name" ng-pattern="/^[a-zA-Z0-9]{4,10}$/" required >
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" ng-model="user.email" required >
</div>
<button type="submit" class="btn btn-success" ng-disabled="form.$invalid">Submit</button>
</form>

Resources