I try to set an input as required if another input has changed. My need is to require confirm password if password has changed.
I use this on the input of confirm password but it is never required :
ng-required="userForm.Password.$touched"
CodePen
Another question : Is there a way to remove ng-Model="user.ConfirmPassword"? because ConfirmPassword is not necessary on my model "user", isn't it?
You should use the name property instead of id.
Also, this is no valid syntax:
<span class="error" ng-show="userForm.Password.$touched userForm.Password.$error.required">Password is required</span>
It should be:
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
Then it will work just fine, as long as Password is the name of the input element, not the ID.
You are not using name property, so you can't use form properties for Password and ConfirmPassword...
Also change AND to OR..
here is updated code
<form name="userForm" ng-controller="userController">
<label for="Password">Set a password:</label>
<input type="password" name="Password" id="Password" ng-model="user.Password" required />
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
<br />
<label for="ConfirmPassword">Confirm the password:</label>
<input name="ConfirmPassword" type="password" id="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="userForm.Password.$touched" />
<span class="error" ng-show="userForm.Password.$touched || userForm.ConfirmPassword.$touched || userForm.ConfirmPassword.$error.required">Confirm password is required</span>
<br/>
<span>Password: {{user.Password}}</span>
<br/>
<span>Conform Password: {{user.ConfirmPassword}}</span>
</form>
Related
I have a login form in which I display any relevant error messages once the user clicks submit. When the user goes back to the input field to edit it, I want to hide the error message.
<form name="loginForm" ng-submit="loginForm.$valid && login(loginFrm.userId, loginFrm.password);" novalidate>
<input type="text"
name="userId"
ng-model="loginFrm.userId"
required
ng-minlength="3"
placeholder="User ID"
autofocus>
<div ng-show="loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>
<input type="password"
name="password"
ng-model="loginFrm.password"
required
ng-minlength="4"
placeholder="Password">
<div ng-show="loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>
<button>Login</button>
</form>
In my current code the error message hides only after the field becomes valid. How do I hide it as soon as the user starts to edit the field?
Two of the options you got here to hide the message is with ng-focus or ng-change.
Depends when you want to hide the message. When using ng-change, you have to change your ng-model-options to allow invalid values. Else the event will not trigger.
I added both options to this plnkr.
With ng-focus
<input type="text"
name="userId"
ng-model="loginFrm.userId"
required
ng-minlength="3"
placeholder="User ID"
ng-focus="main.userIdEdit = true"
ng-blur="main.userIdEdit = false"
autofocus>
<div ng-show="!main.userIdEdit && loginForm.$submitted && loginForm.userId.$invalid">Minimum 3 characters required</div>
With ng-change
<input type="password"
name="password"
ng-model="loginFrm.password"
ng-model-options="{ allowInvalid: true }"
required
ng-minlength="4"
placeholder="Password"
ng-change="main.passwordEdit = true"
ng-blur="main.passwordEdit = false">
<div ng-show="!main.passwordEdit && loginForm.$submitted && loginForm.password.$invalid">Minimum 4 characters required</div>
I tried and searched a lot, but no solution. The form validation in my angular app still not working.
I tried for example:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="formData.username"
required="required">
<span ng-show="form.username.$invalid">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{formData}}</tt><br/>
<tt>formData.$valid = {{formData.$valid}}</tt><br/>
<tt>formData.username.$valid = {{formData.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{formData.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Another one I tried:
<div class="row">
<div class="large-12 columns">
<label>Your email</label> <input type="email" placeholder="Email"
name="email" ng-model="signup.email" ng-minlength=3 ng-maxlength=20
required />
<div class="error-container"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error" ng-show="signup_form.email.$error.required">
Your email is required. </small> <small class="error"
ng-show="signup_form.email.$error.minlength"> Your email is required
to be at least 3 characters </small> <small class="error"
ng-show="signup_form.email.$error.email"> That is not a valid email.
Please input a valid email. </small> <small class="error"
ng-show="signup_form.email.$error.maxlength"> Your email cannot be
longer than 20 characters </small>
</div>
</div>
</div>
But the validation does not work. If I have to enable the validation? But for this I also didn't find anything. It seems, that validation is still enabled in Angular. But why it does not work in my app? All other things works fine.
Regards
Bytecounter
Try this:
<form data-ng-controller="ValidationController" name="validationForm" novalidate="novalidate">
<div class="form-group">
<label for="username">Mail</label>
<input name="username"
type="email"
data-ng-model="username"
required>
<span ng-show="validationForm.username.$invalid && validationForm.username.$dirty">Invalid mail address</span>
</div>
<button type="submit" class="btn btn-primary" data-ng-disabled="formData.$invalid">Submit</button>
<pre>
<tt>formData = {{validationForm}}</tt><br/>
<tt>formData.$valid = {{validationForm.$valid}}</tt><br/>
<tt>formData.username.$valid = {{validationForm.username.$valid}}</tt><br/>
<tt>formData.username.$error = {{validationForm.username.$error}}</tt><br/>
<hr>
</pre>
</form>
Actually your form is available by its name.
Check this plnkr.
You have some errors there.
First:
ng-show="form.username.$invalid"
You are referencing a variable form that does not exist in your scope. You should reference validationForm:
ng-show="validationForm.username.$invalid"
Second:
data-ng-disabled="formData.$invalid"
You are referencing the model of the input, instead of it's form object, that is, again, validationForm:
data-ng-disabled="validationForm.$invalid"
That should do.
Why isn't the error variable being set here? Shouldn't user.username.$error.minlength be true when no value is in the input?
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12" />
<div ng-show="user.username.$error.minlength">Min length!</div>
</div>
<div class="input-wrapper">
<input placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" />
<div ng-show="loginForm.password.$error.minlength">Min length!</div>
</div>
</form>
if you need to show the message when there is no value for the password you need to check the required property.
put a name for the form
<form name="formName" ng-submit="submit()">
put a name to password input. and the required attribute
<input name="password" placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" required />
change the ng-show as,
<div ng-show="formName.password.$error.required || formName.password.$error.minlength">Min length!</div>
formName.password.$error.required will handle the status of empty input.
here is a plunker demo
The angular email validation is not working for me, that I'm not allowed to type any text in the email text box.
Following is my HTML:
<form name="locationSettingsForm" ng-submit="vm.saveLocationSettings()" class="form">
<input class="userInput" style="width:40%" type="email" name="email"
maxlength="50" data-ng-model="vm.location.email" required
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.email">Email is invalid</label>
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.required">Email is required</label>
</form>
Initially I tried without the ng-patter. I only used type='email', but in both instances it didnt work. I can't type any text.
try this pattern
ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/"
it should work
Hi try below code....
<input type="email" id="inputEmail" ng-model="email" name="uEmail" placeholder="Email Id" required>
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
Is there an automated way in Angular to display the error messages for invalid form. For Example, I have the below. It indeed works well in that it doesn't allow the user to submit but it doesn't give the user any automatic feedback to tell them that elements are required. Isn't there an automatic way to get it to print a field is required message by the field if the form is invalid on submit?
<div class="form-center">
<form name="loginform" class="forms" ng-controller="controllers.LoginController">
<fieldset> <legend><h3>Account Login</h3></legend>
<div class="advanced-search-item">
<label>Username:</label><br /> <input type="text" ng-model="username" name="username" placeholder="username" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
<label>Password:</label><br />
<input type="password" name="password" ng-model="password" placeholder="password" required><span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
</div>
<div class="advanced-search-item">
Login
</div>
</fieldset>
</form>
</div>
You will have to add some spans to show errors beside input fields like below
<span class="error" ng-show="submitted && loginform.username.$error.required">Required!</span>
<span class="error" ng-show="submitted && loginform.password.$error.required">Required!</span>
Hopefully you can keep this text in red color, below is the CSS
.error {
padding-left:10px;
color: #F00;
}
when form is submitted and if there are errors it will show above spans
Hope this helps