Say I have some RadioButtons in a RadioButtonGroup. I click one of them and I realize I should not submit the form, instead I just want to trigger a cancel action and return to my original state of none selected. How can I do this?
Figured it out. I was incorrectly passing the value as the defaultSelected prop instead of valueSelected. Now if need to unselect, I can just pass null as the valueSelected prop.
You can do it like this:
If this is not the answer then please explain your question with more detail
$('#ClearAll').on('click',function(){
$('form')[0].reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other <br>
<input id="ClearAll" type="button" value="clear">
</form>
Related
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;
I have one div which contains multiple types of input types. i.e., text, radio, checkbox...
I want to make the div mandatory. That means If I check the radio or check box or enter a value into the text field the mandatory condition satisfies. i.e, selecting any one of them satisfies the condition. If all are left without any value I must display angular messages(ng-messages) below the div.
This code is generated dynamically from Javascript. So validations should be done when I submit the form.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="div1"><!--This div is mandatory-->
<input type="checkbox" name="div1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="div1" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="div1" value="Male">Male<br/>
<input type="radio" name="div1" value="Female">Female<br/>
<input type="text" name="div1" ng-model="text1"><br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
<br/><br/>
<div id="div2"><!--This div is mandatory-->
<input type="checkbox" name="div2" value="SomeValue" ng-model="vm.check3">Some<br/>
<input type="checkbox" name="div2" value="SomeValue2" ng-model="vm.check4">Some2<br/>
</div>
<div></div><!--Should display ng-messages here if none of the above selected.-->
is there any possibility to achieve this?
Yes, you could do that just by wrapping all group of input fields under fieldset and then apply required attribute over that fieldset.
Make sure name attribute of each field should be different in order to consider each field as different. It can be same name for gender radio button.
<!--Below field input fields are mandatory now-->
<fieldset id="div1" required="">
<input type="checkbox" name="check1" value="SomeValue" ng-model="vm.check1">Some<br/>
<input type="checkbox" name="check2" value="SomeValue2" ng-model="vm.check2">Some2<br/>
<input type="radio" name="gender" value="Male">Male<br/>
<input type="radio" name="gender" value="Female">Female<br/>
<input type="text" name="text1" ng-model="text1"><br/>
</fieldset>
Today I approached a weird case: I got form with two radio buttons.
When one, currently checked, is disabled, form shouldn't be able to submit.
The thing is, that standard way with form.$valid doesn't work :-/
UPDATE
Even if I watch for changes in form, $invalid status is not reflected on ng-disable save button. Why?
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="!RadioPen.someForm.$valid">Save</button>
Here is full working example: CodePen
The form.$valid is working fine. The required check works based on the value of a form element. Since you are already providing a value to the model associated with the radio buttons, i.e, RadioPen.data.radio, in your controller script, the required condition is being fulfilled and hence the form is getting validated. Here is a modified and working version of your code where I have removed the initialization of the model for the radio buttons.
angular
.module('test', [])
.controller('RadioPen', radioPen)
function radioPen($scope) {
var vm = this;
vm.data= {};
$scope.RadioPen = vm;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
<form name="RadioPen.someForm" ng-controller="RadioPen" novalidate>
Current
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
Delayed
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="!RadioPen.someForm.$valid">Save</button>
{{'is valid: ' + RadioPen.someForm.$valid}}
</form>
</div>
check this out:
<div ng-app="test">
<form name="ctrl.someForm" ng-controller="RadioPen as ctrl" novalidate>
Current
<input name="someRadio" ng-disabled="true" type="radio" value="CURRENT" ng-model="RadioPen.data.radio" required>
Delayed
<input name="someRadio" type="radio" value="DELAYED" ng-model="RadioPen.data.radio" required>
<button ng-disabled="ctrl.someForm.$invalid">Save</button>
{{'is invalid: ' + ctrl.someForm.$invalid}}
</form>
</div>
I have HTML code:
<input type="text" ng-model="name" required>
<input type="text" ng-model="sec_name" required>
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
How I can remove required attribute if user checked input type="checkbox"?
And to come back if unchecked?
It needs for ng-disabled:
<div ng-disabled="form.$invalid">Send form</div>
You can use ng-required, instead of required, so you could set a model on the checkbox for example like
<input type="text" ng-model="name" ng-required="!none">
<input type="text" ng-model="sec_name" ng-required="!none">
<h2>Check if you dont want enter full name</h2>
<input type="checkbox" ng-model="none">
Here is a working example for you - http://jsfiddle.net/U3pVM/16544/
Use ng-required instead:
<input type="text" ng-model="sec_name" ng-required="none">
That's exactly why ng-required exists.
I am working on a QA app where i need to add multiple answers to a question as per requirement dynamically. for this in my form I have a question field , an answer field and a Boolean correct field to tell if the answer choice is correct or not. I have given a button add another answer which create a new answer field when clicked.I want to give ng-model name dynamically so that I can easily retrieve the value of ng-model.
For this I have created a controller which is like
app.controller('questionsCtrl', function ($scope) {
$scope.question={};
$scope.question.answers=[];
$scope.answer_choices=[];
var choice=1;
$scope.addAnswerField=function(){
$scope.answer_choices.push(choice);
choice++;
}
$scope.addAnswerChoice=function(){
$scope.question.answers.push({});
}
});
My HTML code is:
<div class="container">
<form ng-submit="createQuestion()">
<textarea class="form-control" ng-model='question.question_text'></textarea>
<textarea class="form-control" ng-model="question.answer_choice_1"></textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.correct_1" />
Correct
</label>
<div ng-repeat="choice in answer_choices">
<textarea class="form-control" ng-model="question.answers.$index[answer]">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model = "question.answers.$index[correct]" />
</label>
</div>
<button class='btn btn-primary' type="submit">Submit</button>
</form>
<button class="btn btn-default" ng-click="addAnswerChoice()">Add Answer</button>
</div>
I want to do something like when i add a new answer choice a new empty object is pushed in the question.answers array and this objects first key answer hold the value of question field and second key ` like
question.answers=[
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
{'answer':'',correct:''},
]
Suggest me how can i do this . There is only one error that using $index i am unable to assign value to the array object at the same index in question.answers array.
Or if there is any other better way suggest me.
Help will be appreciated.
You are making just a small mistake. Correct your syntaxes and it will work fine
replace your ng-repeat div with this code
<div ng-repeat="choice in choices">
<label class="checkbox-inline"> Choice</label>
<textarea class="form-control" ng-model="question.answers[$index].answer">
</textarea>
<label class="checkbox-inline">
<input type="radio" name="correct" ng-model="question.answers[$index].correct_answer" value="1" />
Correct
</label>
</div>
And assign values to the radio buttons or these will not show in your object.