Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?
Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!
use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS
Related
I am trying to create a survey. The code looks like this:
<form ng-submit="passEngineer(engineer)">
<input type="radio" ng-model="engineer" ng-required="!engineer">Default
<input type="radio" ng-model="engineer" ng-required="!engineer">Custom
<input type="text" ng-model="engineer" ng-required="!engineer">
</form>
If First selected, it DOES pass it without issues. If Second selected, it SHOULD pass the value entered inside third input. How can I do that? Value in third input MUST be passed if second input selected. Tried many ways, can't really figure out.
I think you need to divide up how you're applying ng-model. You might make engineer an object in your controller and then change your markup like this:
<form ng-submit="passEngineer(engineer)">
<input name="engineer" type="radio" ng-model="engineer.isDefault">Default
<input name="engineer" type="radio" ng-model="engineer.isCustom">Custom
<input type="text" ng-model="engineer.customValue" ng-required="engineer.isCustom">
</form>
I'm trying to build a Angular 2 component which displays a list of options with radios. It works fine but it the answer field of the component, which is bound inside [(ng-model)]="answer", won't update when selecting one of the options. Am I doing something wrong or isn't this the way to create a list of radio selection options?
<div>
Answer: {{ answer }}
</div>
<div class="radio" *ng-for="#option of itemData">
<label>
<input type="radio" [value]="option.id" [(ng-model)]="answer"
(change)="responseChanged()" name="radio-list">
<span>{{ option.name }}</span>
</label>
</div>
Plunker
Well i guess two way binding is now working with radio, so currently you cannot use [(ng-model)].
The alternative is to use the change event and checked attribute. See my plunker
https://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview
(change)="answer=$event.target.value"
and
[checked]='answer==option.id'
You cannot use ng-model with radio boxes like in angular1. However there are several components on github that allows you to do it easily, like ng2-radio-group component. It has support for both radio select and multiple checkboxes select:
<radio-group [(ngModel)]="sortBy">
<input type="radio" value="rating"> Rating<br/>
<input type="radio" value="date"> Date<br/>
<input type="radio" value="watches"> Watch count<br/>
<input type="radio" value="comments"> Comment count<br/>
</radio-group>
<checkbox-group [(ngModel)]="orderBy">
<input type="checkbox" value="rating"> Rating<br/>
<input type="checkbox" value="date"> Date<br/>
<input type="checkbox" value="watches"> Watch count<br/>
<input type="checkbox" value="comments"> Comment count<br/>
</checkbox-group>
Take this code for Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
It allows a user to select one button at a time, I was always under the impression that javascript was the answer to this type of a solution. So my question is, is there any embedded javascript in the HTML radio button and if not, where is the function coming from?
Its the Browser's duty to do that for us.
Why?
Because the behavior is stated in the spec:
http://www.w3.org/TR/html/forms.html#radio-button-state-(type=radio)
I have created a validation form, this is one of the fields that you have to compile:
<input type="number" name="height" min="160" max="200"/>
but, I want to modify the minimum number if someone clicks on a radio button.
<input type="radio" name="gender" value="male">
if someone clicks here I want to set the minimum number of the height to 170
<input type="radio" name="gender" value="female">
if someone clicks here I want to set the minimum number of the height to 160
Can someone help me? :)
Try this:
<input id='height_input' type="number" name="height" min="160" max="200"/>
<input type="radio" name="gender" value="male" onclick="setmin(170)">
<input type="radio" name="gender" value="female" onclick="setmin(160)">
Then in Javascript:
function setmin(n) {
document.getElementById('height_input').min = n;
}
jQuery is totally unnecessary. No need to use a huge library for such a simple task. Remember to add the id='height_input' to your first input like I show above.
jQuery would be your best bet.
you can change the value of attributes using attr, and you can add click handlers to the two radio buttons using on or click
Here's a good resource for getting started with jQuery
I am trying to do a radio buttons group with couple of options and the last option will be a text input field "Other".
Something like this:
I want to do it so when submitted, the url called is
app://configuration?server=...
server should contain the value of the server attribute wether it's from one of the radio buttons or from the input group
I tried to do this
<form method="GET" action="app://configuration">
Select server <br>
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" value="">Other <input type="text" name="server" />
<input type="submit" value="Submit">
</form>
I have used the same name attribute for the radio buttons and the input field and the result is that the name (server) is being duplicated when the submit is pressed.
I understand why it doesn't work in the current way. Any idea how to achieve something like this with javascript ? (no third party like jquery please)
I have no access to change the server code so I can't use a different attribute name because the server will not know it...
Try this pure javascript (modified your html code)
function changeradioother() {
var other = document.getElementById("other");
other.value = document.getElementById("inputother").value;
}
<input type="radio" name="server" value="1">Production<br>
<input type="radio" name="server" value="2">Test<br>
<input type="radio" name="server" value="3">Localhost<br>
<input type="radio" name="server" id="other" value="other">Other <input id="inputother" type="text" onchange="changeradioother()" />
<input type="submit" value="Submit">
I added an id to the last radio button and the inputbox.
You cant use the same name for the text input. Radio buttons are fine because only one will be returned to the server.
Other <input type="text" name="serverCustom" />
Check to see if the value of "server" is null or empty ("") when you get it, and then if it is grab the value of serverCustom.
If you wish to use pure javascript to check the values, and send the data you require use this:
http://jsfiddle.net/Lord_Zero/w5x4h/
Is this what you are trying to do?
Fiddle: fiddle
function submit(){
var curRadio = document.querySelector('input[name="server"]:checked').value;
var serverValue;
if(curRadio==4)
{
serverValue=document.getElementById("other").value;
}
else
{
serverValue=curRadio;
}
alert(serverValue);
}