I'm trying to set some fields to dirty after a specific button is clicked.
template
<div class="col-md-4">
<label class="radio radio--inline">
<input type="radio" class="radio__control" name="radio_Role"ng-model="Form.RoleCheck" value="1" required>
<span class="radio__label">
Whatever
</span>
</label>
</div>
<button id="gotoPersonendatenVn" ng-click="dirty()" type="button">
Dirty
</button>
app.js
$scope.dirty = function(){
$scope.Form.RoleCheck.$setDirty();
}
I've tried different things but i always get "TypeError: $scope.Form.RoleCheck is undefined"
Firstly, check where you try to add $setDirty, you try add it to ngModel, not to the name="radio_Role"
And where is yours form
<form name="Form">
<input type="radio" class="radio__control" name="radio_Role" ng-model="modelName" value="1" required>
if you want set input as dirty
$scope.Form.radio_Role = false;
Related
I wanna give required validation to a group of checkboxes formed using ng-repeat. So far I have tried
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
</div>
Still unable to validate. Thanx in adv.
User ng-required for validation
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
What problem you face I don't understand. But, I solved the issues I faced in your code. This is the plunker
<form name="orderForm" ng-submit="call()">
<div class="radio radio-info radio-inline" ng-repeat="styp in ship_type_list">
<div>
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" required>
<label for="input_ship_type{{styp.id}}"> {{styp.name}} </label>
</div>
</div>
<div ng-show="orderForm.$submitted || orderForm.ship_type.$touched">
<span ng-show="orderForm.ship_type.$error.required" class="text-danger">Select ship type.</span>
</div>
<button type="submit">submit</button>
</form>
All the best.
Check the array length in the ng-required attribute of the checkboxes.
<input type="radio" id="input_ship_type{{styp.id}}" ng-model="formData.ship_type" ng-value="styp.id" name="ship_type" ng-required="value.length==0">
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 editing User Form. I send the data from controller to the edit view using $scope object for editing form. The data is look like this:
$scope.changeUser = [
{
id: 1,
username: 'Ramesh',
password: 'Ramesh1#23',
role: 'admin',
active: 'no'
}
];
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
When edit form get {{changeUser.action}} than, I have to checked the radio button accordingly. As like when action=='no' the radio button with name no should be automatically checked as we did using checked value=no in the html. I have to write the ng-if conditions seeing the action value.
You are missing the index of changeUser array in your ng-model.
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="yes" />
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser[0].active" value="no" />
No
</label>
</div>
</div>
</div>
See the Plnkr
I am using angularjs in my project.
I have below code in my HTML:
<div class="MT10" ng-init="getPaymentDetailsById()">
<div class="panel">
<div class="form-group">
<label> Name:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.name" >
</span>
</div>
<div class="form-group">
<label> APP :</label>
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
</div>
<div class="form-group">
<label> APP KEY:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appKey" >
</span>
</div>
<div class="form-group">
<label> APP SECRET:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appSecret">
</span>
</div>
</div>
</div>
now
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
This code displays some data in my textbox. And I want to display that data in textbox in both scenario, that is while editing and while posting new data to server. So it just displays it while editing but not when I want to post new data to server. Basically this textbox will always have some value pre-filled in it. So i am guessing I have to use some condition on that. So please help me how to achieve that.
I think I know what you are getting at. Without seeing your JS file it would be very hard to give you a good example, however using $scope.value in your JS and setting the text to {{value}} in your HTML should provide the desired result.
Now that I understand your question, you could do this:
<input type="text" ng-model="paymentDetails.id" ng-disabled="appId" ng-show="adding"/>
<span ng-hide="adding">{{paymentDetails.id}}</span>
And then in your controller you could control the variable:
$scope.adding = true
and set it to false based on some condition
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..