I would really appreciate your help. Am using AngularJS to render questions in a quiz in the manner below:
<form name="form1" ng-controller="quizController" ng-submit="submit()">
<div class="form-group">
<span class="col-xs-3">What is your favorite color?</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
ng-required is enforcing the requirement that one of the option must be selected. When no option is selected and the user clicks the submit button, all the options are highlighted in red and the text You must choose an option appears next to the first option. I would like to tweak this behaviour such that when no option is selected, it is the question text that appears in red. Thanks for your assistance
Here is an example to show how you can do it. Basically you need to use $submitted and $invalid properties of FormController of AngularJS. Take a look at them here: https://docs.angularjs.org/api/ng/type/form.FormController
I used bootstrap's has-error class to highlight the question, if the color is not selected and the form is submitted the question will be highlighted red. I added novalidate attribute to disable html5 validation and used only angular's validations.
angular.module("myApp", []).controller("quizController", function($scope) {
$scope.submit = function() {
console.log("oley");
}
})
.has-error {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
<form name="form1" ng-controller="quizController" ng-submit="submit()" novalidate>
<div class="form-group">
<span class="col-xs-3" ng-class="{'has-error' : form1.color.$invalid && form1.$submitted}">What is your favorite color?</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />Red</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Green" />Green</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="Blue" />Blue</span>
<span><input type="radio" name="color" ng-model="color" ng-required="true" value="White" />White</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
Here is a solution based on CSS.
You could wrap all radio texts into an own span:
<span>
<input type="radio" name="color" ng-model="color" ng-required="true" value="Red" />
<span>Red<span>
</span>
....
and then use the following selector to set the text-color of these spans to red if the radio button is invalid (because its value is missing):
input[type=radio]:invalid + span { color: red; }
Besides I think you only need to place the ng-required attribute only on one radio button (and if its is constant you could replace it by a simple required).
Related
How can I select input type radio by just clicking the space around it?
You could use a <label> tag:
<input type="radio" name="box" id="box">
<label for="box">Your content here</label>
Clicking on the label toggles the input.
You should be using the label element. There are two ways to use it with a radio button, as shown below.
<form>
<label>
<input type="radio" name="options">
<span>Option 1 - Inside Label</span>
</label>
<br>
<input type="radio" name="options" id="button2">
<label for="button2">
<span>Option 2 - Outside Label</span>
</label>
</form>
I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>
You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>
I have a form that validates a radio input. The radio input is required (The user has to choose one of the radio fields before clicking on the submit button). I'm using for that ng-required in the input radio.
The radio input looks like something like this :
<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">
I want to show a message in my form once the user submits. I use for that the ng-message directive. I use it this way :
<div class="msg-error-input" ng-if="!theModel" ng-messages="myForm.myRadio" role="alert">
<div class="icon my-icon" ng-message="required">
It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
</div>
</div>
I resolved that by doing :
<form name="myForm" id="myForm">
<input type="radio" name="myRadio" value="1" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="2" ng-model="theModel" ng-required="!theModel">
<input type="radio" name="myRadio" value="3" ng-model="theModel" ng-required="!theModel">
<div class="msg-error-input" ng-if="!theModel && submitted" ng-messages="myForm.myRadio" role="alert">
<div class="icon my-icon" ng-message="required">
It has to show an error here. But this doesn't seem to work ! It seems that there's no link between the ng-message='required' and the ng-required..
</div>
</div>
<button type="submit" data-ng-click="submitted"/>
</form>
( I saw that the ng-submitted was not added to my form, so I added a variable submitted on click )
I have a radio button and a text field. I want the text field to be required only if the radio button is ticked.
<label class="radio">
<input type="radio" value="createNewCollection" ng-model="selectedCollection" />
</label>
<input type="text" ng-model="collectionName" placeholder="Create new Collection"/>
So, collectionName is only required if createNewCollection is selected.
angular.module('myApp', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app="myApp">
<label class="radio">
<input type="radio" value="createNewCollection" ng-model="selectedCollection">
</label>
<input type="text" name="input" ng-required="selectedCollection" ng-model="collectionName" placeholder="Create new Collection">
<p ng-show="form.input.$error.required">This is required.</p>
</form>
You need to set the ng-required attribute of that input to the model name of the radio input. ng-required="selectedCollection"
Read the docs here.
I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:
EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.
<form novalidate>
<div class="radio" ng-repeat="answer in node.Answers">
<input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}}
</div>
<div>
<input type="button" ng-click="previous()" value="Previous"/>
<input type="button" ng-click="next(selectedAnswer)" value="Next"/>
</div>
</form>
EDIT: Here is a working fiddle
First give the form a name so that you can refer to it:
<form name="myForm" novalidate>
Next add the required attribute to the radio button:
<input type="radio" name="answerGroup" required
ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>
Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:
<input type="button" ng-click="next(selectedAnswer)" value="Next"
ng-disabled="myform.answerGroup.$invalid" />
Look below, using ng-show to display an error message should neither radio button be clicked.
<label for="dateofbirth">
<span>Are you the primary cardholder?</span>
</label>
<ul>
<li>
<label for="yes">
<input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
Yes
</label>
</li>
<li>
<label for="no">
<input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
No
</label>
</li>
</ul>
</fieldset>
<span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>