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>
Related
I am getting HTML data from an API and this Html has two radio buttons and some text. In my app, I am binding this Html in modal by [innerHtml]="example|safeHtml" and when I change the radio button option, I want to get these values on click of modal submit button. Here is my Html:
<div class="safeCustody-charge">
<p class="para1">This is to inform you that effective 1 September 2019</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios1" value="option1" checked="checked">
<label class="form-check-label" for="exampleRadios1">
<span style="color:red">Option 1:</span> I acknowledge the policy change
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
<span style="color:red">Option 2:</span> I do not wish to pay
</label>
</div>
Since you're putting the html in with the [innerHtml] directive, you cannot use any Angular mechanics do get the values. Try using vanilla js functions, like for example
document.getElementById('exampleRadios1').value
You may need to cast the returning element to a HTMLInputElement for type checks.
Personally I wouldn't get the HTML from a seperate resource. Instead you could return some JSON from your server, then use some *ngFor logic to display the content as needed.
I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!
You need to use different names because each field needs to be identified individually by the server.
Hey i'm trying to display a list of radio buttons inside an ng-repeat and it doesn't seem to be taking in the initial values of the fields i bind to ng-model on the input.
When i give a simple array to an ng-repeat, the buttons are displayed with the initial values properly. But if a nested ng-repeat comes into the picture, only the last item of each list initializes with a value
Here's my pen:
https://codepen.io/alokraop/pen/JXLZBp
I have no idea where i'm going wrong. I'm making sure that the name attribute of the radio button is unique to each group.
Appreciate the help.
The issue here is that you can't interpolate an Angular value into the attr name. If we remove the name attr from our HTML, we get the expected result.
See Below.
<div ng-app="sample">
<div ng-controller="sampleController as sample">
Single ng-repeat:
<div ng-repeat="queue in sample.queues">{{queue.name}} status:
<input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="hooked" /> hooked
<input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="unhooked" /> unhooked
<input type="radio" name="queue-{{$index}}" ng-model="queue.condition" value="partial" /> partial
</div>
<br />
Nested ng-repeat:
<div ng-repeat="qm in sample.qms">
{{qm.name}} queues:
<div ng-repeat="queue in qm.queues">{{queue.name}} status:
<input type="radio" ng-model="queue.condition" value="hooked" /> hooked
<input type="radio" ng-model="queue.condition" value="unhooked" /> unhooked
<input type="radio" ng-model="queue.condition" value="partial" /> partial
</div>
</div>
</div>
</div>
If we want to include a name dynamically, look into an Angular name directive such as: Dynamic form name attribute <input type="text" name="{{ variable-name }}" /> in Angularjs
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
I have a gender selection radio:
<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">
<label class="required">Sexo</label>
<input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
<label for="userDto.gender0">Femenino</label>
<input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
<label for="userDto.gender1">Masculino</label>
</div>
I'm trying to use a jQuery script to get the selected radio and paste it inside of a label.
$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });
The problem is that I'm using Spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a 0 and 1 to the options. So I'm out of ideas about how to make the next HTML to get the value of the selected radio.
<div name="userLabelDiv" id="genderUserLabelDiv">
<label class="required">Sexo</label>
<label id="genderLabel">Masculino</label>
</div>
Could someone guide me through the problem? I can't find where is my error in the JS code. Thank you
The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.
$('input[name="userDto\\.gender"]').change( ... )