I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</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 passed an array value in my view with $userdata.
In my view, there's a button there that will show a modal when triggered. This modal will show the user data using the $userdata variable.
Now, I used angular js for my form inputs.
For example:
div class="form-group">
<label for="company_name" class="col-sm-12 control-label">Company Name</label>
<div id="company_name" class="col-sm-12">
<input type="text" class="form-control" name="company_name" value="{{$userData['company']['name']}}" ng-model="user.company_name" ng-required="true">
</div>
<div class="col-sm-12">
<span ng-show="userForm.company_name.$error.required && userForm.company_name.$touched"><br> <small><i>Name field is required</i></small></span>
</div>
</div>
The problem here is the input is not showing any value.
Why so? But when I removed the ng-model and just used a plain input field, the value will be shown.
You have to remove value="..." from input, ng-model will control it. look at this example.
<input type="text" class="form-control" name="company_name" ng-model="user.company_name" ng-required="true">
I am doing one register page using angularjs.
Follows my html code:
<form name="frominline" action="post" class="clearfix form-hidden" id="Register-form">
<div class="col-md-12">
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="text" name="userid" autocomplete="off" id="username" class="form-control" required autofocus="" ng-model="user.name" ng-minlength="3" ng-maxlength="12" ng-model-options="{ allowInvalid: true }">
<label class="blmd-label">User Id</label>
</div>
<p class="login-error" ng-show="frominline.userid.$dirty && frominline.userid.$error.required">
<span style="color : red">required</span>
</p>
<p ng-show="frominline.userid.$error.minlength" class="help-block" style="color:red;">Username is too short.</p>
<p ng-show="frominline.userid.$error.maxlength" class="help-block" style="color:red;">Username is too long.</p>
</div>
<div class="input-group blmd-form">
<div class="blmd-line">
<input type="email" name="email" autocomplete="off" id="email" class="form-control" required autofocus="" ng-model="user.email">
<label class="blmd-label">Email</label>
</div>
<span class="login-error" ng-show="frominline.email.$error.required && frominline.email.$dirty" style="color:red;" ng-model-options="{ allowInvalid: true }">required</span>
<span class="login-error" ng-show="!frominline.email.$error.required && frominline.email.$error.email && frominline.email.$dirty" style="color:red;">invalid email</span>
</div>
<button type="reset" ng-click="resetform(frominline)">reset</button>
</form>
My js code:
app.controller('loginCtrl'['$scope',function('$scope'){
var user = this;
$scope.resetform(form){
user.name='';
user.email='';
$scope.frominline.$dirty = false;
$scope.frominline.$pristine = true;
$scope.frominline.$submitted = false;
}]);
Now, in first image, those are the validation errors.
Now, I hit the reset button and the validation errors are gone but in the second image I got required field.
Can you please help me removing or reseting the whole form on a button click?
I tried with many options like $setPristine() or $setValidity() but i can't fix this issue "required" error message.
Follows the image of the form with only required error message after clicking reset button:
The form is probably cleared, but those input fields are not. When you are display the error for a particular field (e.g. ng-show="frominline.userid.$error.minlength") include the state of the form as well (e.g. ng-show="frominline.$submitted && frominline.userid.$error.minlength").
I'm using angularJs validation in my html form. I'm using the required validation on an input, and when I erase the value there the textbox gets highlighed in red and trying to submit the pops-out the error 'Please fill out this field' But my custom error message is not displayed. Following is the code.
<form id="settingsForm" ng-submit="vm.saveSettings()" class="form">
<td style="width:30%">
<input class="userInput" name="locationName" style="width:80%" type="text" maxlength="50" data-ng-model="vm.location.locationName" required />
<label class="validationErrorText" data-ng-show="locationSettingsForm.locationName.$error.required">Location Name Required</label>
</td>
</form>
Any idea why this happens? Attached is a screenshot of how its displayed when the field is not filled.
I have created a plunker which will help you.
http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF
<form role="form" name="signUpForm" class="form-horizontal">
<div class="form-group">
<label for="url" class="col-sm-4 control-label">URL</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-#_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
<small class="text-danger">Please enter valid URL.</small>
</span>
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
<small class="text-danger">URL should have 2 to 25 characters.</small>
</span>
</div>
</div>
</form>
You can use similar validation. The name attribute should match with the condition. Here it is url.
Add
name="locationSettingsForm"
to the <form> element
I have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }