I have this HTML set up
<input type="radio" value="yes" ng-model="sa" style="width:10px;"> Yes
<input type="radio" value="no" ng-model="sa" style="width:10px;"> No
<br /><br />
<div ng-show="sa == 'yes'">
<textarea form-title="Please outline your requirements" title-placement="top" ckeditor ng-model="form.equal.interviewArrangements"></textarea>
<br /><br />
<p class="alert alert-error warning" ng-show="errorAt[14]">
Please enter your requirements or choose no above
</p>
</div>
<input type="button" class="btn btn-primary nextStep" value="Send Application" ng-click="sendApplication()" />
Which all works fine, the div is shown when the radio yes is selected, now in sendApplication() I have this line
log($scope.sa);
That is always logged as undefined, no matter what radio box is selected. What have I got wrong?
If in my controller I add $scope.sa = 'no'; by default the radio is set to No which is corrent, but when I change it to yes, and then log the variable it always logs as no.
In short, you should respect the "dot rule":
<input type="radio" value="yes" ng-model="data.sa" style="width:10px;">
<!-- … -->
Related
I am trying to invalidate and disable the submit button on the load of the page, as not entering text into textbox is invalid, but my code is not working, can someone please provide the solution.
<div id="reg_bground">
<div id="formdiv" ng-app="myApp" ng-controller="valCtrl">
<form name="myForm" novalidate>
<div style="font-family:calibri; font-size:30px; font-weight:bolder;">
<span>Register:</span>
</div>
<div>
<span>Name:</span><br>
<input type="text" name="user" ng-model="user" required><br>
<p ng-show="myForm.user.$dirty && myForm.user.$invalid">*Please insert the name</p>
</div>
<input type="number">
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</form>
</div>
</div>
You essentially check for $dirty state in the submit button for disabled status.
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
$dirty is only set to true when user has meddled with the myForm.user input, which is not the case on page load. Instead, try checking the $pristine state (or !$dirty)
<input type="submit" ng-disabled="myForm.user.$pristine || myForm.user.$invalid">
Delete the dirty check in the submit button:
<input type="submit" ng-disabled=" ̶m̶y̶F̶o̶r̶m̶.̶u̶s̶e̶r̶.̶$̶d̶i̶r̶t̶y̶ ̶&̶&̶ ̶ myForm.user.$invalid">
The field content is valid
$invalid working when you enter a input and input doesn't match your pattern .
you must use $error.required for your goal.
follwing will work
<div id="reg_bground">
<div id="formdiv" ng-app="myApp" ng-controller="valCtrl">
<form name="myForm" novalidate>
<div style="font-family:calibri; font-size:30px; font-
weight:bolder;">
<span>Register:</span>
</div>
<div>
<span>Name:</span><br>
<input type="text" name="user" ng-model="user" required><br>
<p ng-show="myForm.user.$dirty &&
myForm.user.$error.required">*Please insert the name</p>
</div>
<input type="number">
<input type="submit" ng-disabled="myForm.user.$dirty &&
myForm.user.$error.required">
</form>
</div>
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 am building a CMS which allows one to add all kinds of form fields, one of which is a radio button.
I am allowing the user to specify whether the radio button is required / not required. If its required, then user has to select a radio button, otherwise a message will be displayed.
Problem is i have been unable to get the validation to work. I.e. data-ng-required.
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]"
data-ng-required={{formField.required}}>
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>
<div class="radio" data-ng-repeat="option in formField.options">
<label>
<input type="radio"
data-ng-attr-id="{{formField.fieldId}}"
name="{{formField.fieldId}}"
value="{{option}}"
data-ng-required="formField.mandatoryField === true ? !pageForm.dynamicFormField[formField.fieldId] : false"
data-ng-model="pageForm.dynamicFormField[formField.fieldId]">
{{option}}
</label>
</div>
<!-- messages -->
<span class="help-block"
data-ng-show="_pageForm[formField.fieldId].$error.required && formSubmitted.pageForm">{{formField.labelDisplayText}} is required
</span>
I've this basic form implemented using AngularJS and Bootstrap:
http://jsfiddle.net/dennismadsen/0stwd03k/
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-submit="save()">
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.save = function () {
};
}
Result
The Name input field is required. When I click the submit button, I need the input field to have a red border if it's invalid. How can this be done?
Alternatively, if I unfocus the input field and it's still not valid, it would be great that the red corder is shown on that time, instead of waiting for the form submit.
Twitter Bootstrap has an has-error class, so I would use this in conjunction with ng-class for the form group, then a label with the label and label-danger classes for good measure:
<div class="form-group" ng-class="{'has-error': errors.Name }">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" required />
<span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>
Then in your controller, have an errors object, and set the Name property of this to a string when the name is invalid.
The first thing you were missing was adding ng-model='name' to input field, then only will the form become invalid once you click submit, otherwise the form will always be valid since it considers that there is no field present.
Then I'd add the submitted class on the submit click button, then put the border css like .submitted would be the parent and .ng-invalid would be the child so we can put the style on .submitted .ng-invalid
HTML
<div ng-controller="MyCtrl">
<form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
<div class="form-group">
<label for="name">Name*</label>
<input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
</div>{{submitted}}
<button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
</form>
</div>
CSS
.submitted .ng-invalid{
border: 1px solid red;
}
Working Fiddle
Hope this could help you, Thanks.
Basically you need angular to take over validation, so add novalidate to form. Also add ng-class to input field to determine wether to add error css
<form name="myForm" novalidate ng-submit="test()">
<input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required. </span>
</span>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
Good luck..
I have an Angular modal form that I'm styling with Bootstrap. I I want to validate when the user clicks "I Agree." (I don't want to submit the form because it is part of a larger form that will be submitted later.) How can I force this validation when the button is clicked? Also, should the form name be the same as the larger form or have its own name?
Modal:
<form name="agreementForm" novalidate>
<div class="form-group" ng-class="{
'has-error':agreementForm.signature.$invalid && !agreementForm.signature.$pristine
}">
<label class="control-label" for="signature">Signature</label>
<input type="text" id="signature" name="signature" ng-model="agreementForm.contact.signature"
placeholder="Signature (e.g., /John Doe/)" class="form-control" ng-minlength=1 ng-model-options="{ updateOn: 'blur' }" required />
<span ng-show="agreementForm.signature.$error.required && !agreementForm.signature.$pristine" class="help-block">
Please type your signature to agree</span>
</div>
<div class="modal-footer">
<button ng-click="$dismiss()" class="btn btn-warning">Cancel</button>
<button ng-click="$close()" class="btn btn-primary">I agree</button>
</div>
</form>
Would ng-submit solve your issue? For instance,
<form ng-submit="$close()">
<input type="text" ng-model="signature" ng-required="true"/>
<button type="submit">Submit</button>
</form>
It prevents the request being sent to the server and should still perform the validation on the form.