I have a form using a template driven form and I whant to make a radio button selected by default but it doesnt work, this is a part of my code:
<div class="donut-form-promos">
<span>Promo:</span>
<div class="donut-form-promos-choices">
<input
type="radio"
name="promo"
[value]="'newPromo'"
rquired
ngModel
#promo="ngModel"
/><span>New</span>
<input
type="radio"
name="promo"
[value]="'limitedPromo'"
required
ngModel
#promo="ngModel"
/><span>Limited</span>
<input
type="radio"
name="promo"
[value]="'clubPromo'"
required
ngModel
#promo="ngModel"
/><span>Club memeber</span>
<input
type="radio"
name="promo"
[value]="undefined"
required
ngModel
#promo="ngModel"
[checked]="'checked'"
/><span>None</span>
</div>
</div>
I upload the example in stakeblitz too , this is a link: https://stackblitz.com/edit/angular-ivy-dd8u6v?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Thank you.
Related
I have {{policy.isActiveInPolicyGroup}} which is Boolean, I want the radio input be checked if it was true.
<div ng-repeat="policy in item.policies">
<input type="radio" ng-model="item.selectedPolicy" id="policy_{{$index}}"
name="test" ng-value="policy.id">
<label class="custom-control-label" for="test">
{{item.name}}
</label>
</div>
The first thing you should know it's about value of inputs with radio type:
Recommended
the radio inputs can't define by Boolean, if inputs are more than 2 we can't define value as Boolean so we should set a different value for each of them.
Ex: <input type="radio" name="test" ng-value="1">, <input type="radio" name="test" ng-value="2"> , <input type="radio" name="test" ng-value="3">
Not Recommended
Note: Except when input number is 2: in this case we can set value false or true
Ex: <input type="radio" name="test" ng-value="true">, <input type="radio" name="test" ng-value="false">
radio input Note:
all radio inputs in one group should have same name
checkbox input:
inputs with checkbox type by default define with Boolean value because we can set different name for each of them, and result is checked [true] or not [false]
ng-model and ng-value
Radio input should have two attributes ng-model and ng-value that because in angularjs logic ng-model should equal ng-value and can't do it by one attribute.
Only set ng-model value like following:-
$scope.item.selectedPolicy = $scope.policy.id;
It will be checked if its ng-true value matched with its ng-model value.
DEMO of Radio Buttons that Use Boolean Values1
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<fieldset>
<input type="radio" name="radio"
ng-model="model" ng-value="false">false<br>
<input type="radio" name="radio"
ng-model="model" ng-value="true">true<br>
</fieldset>
<fieldset>
<input type="checkbox" ng-model="model">check<br>
</fieldset>
model={{model}}
</body>
For more information, see
AngularJS <input type="radio" Directive API Reference
AngularJS <input type="checkbox" Directive API Reference
I am trying to validate checkbox in angular 2 by template driven but not working.I have searched in google also no one answered properly.Any genius can answer this question?
https://stackblitz.com/edit/angular-9nkywb?file=src%2Fapp%2Fapp.component.html
app.component.html
<form #f="ngForm">
<input type="checkbox" name="isTCAccepted" [ngModel]="user" required
#tc="ngModel">Name1
<input type="checkbox" name="isTCAccepted" [ngModel]="user" required
#tc="ngModel">Name2
<input type="checkbox" name="isTCAccepted" [ngModel]="user" required
#tc="ngModel">Name3
<div *ngIf="tc.invalid && f.submitted">
Please check atleast one
</div>
<button>Submit</button>
</form>
As I see, Everything is fine with the code except that name for the input tags should be different, you can have a look into below code,
`
<form #f="ngForm">
<input type="checkbox" name="isTCAccepted1" [ngModel]="user" required
#tc1="ngModel">Name1
<input type="checkbox" name="isTCAccepted2" [ngModel]="user" required
#tc2="ngModel">Name2
<input type="checkbox" name="isTCAccepted3" [ngModel]="user" required
#tc3="ngModel">Name3
<div *ngIf="(tc1.invalid && tc2.invalid && tc3.invalid) && f.submitted">
Please check atleast one
</div>
<button>Submit</button>
</form>
`
How do I get a value of 1 if it is checked and a value of 0 if not using Typescript? I am using a materialize framework.
Here's the code for it:
<div class='switch'>
<label>
Deactivate
<input name='switch_Activate' type='hidden' value='0'>
<input id='active' name='switch_Activate'
type='checkbox' onclick='onActive(this.id)' checked value='1'>
<span class='lever'></span>
Activate
</label>
</div>
function
onActive(){
}
Thank you!
You can use type="radio" inputs and bind its to ngModel
<input type="radio" name="switch_Activate" [value]="0" [(ngModel)]="switchModel">
<input type="radio" name="switch_Activate" [value]="1" [(ngModel)]="switchModel">
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I'm trying to come up with a form comprised of radio buttons group where a user must select one of the options and if he doesn't there's a custom validity message.
So the logic will be:
A user forgets to select an option and the validity message shows up.
He goes back and selects any option to go proceed.
The problem is, the way things are it only goes ahead if the selected option is the one with the onclick event as shown below. If it isn't then the message will keep showing up.
I have tried to juggle around with the required, oninvalid and onclick thingies but to no avail. Any ideas?
Thanks!
<form>
<input type="radio" name="test" value="0" required oninvalid="this.setCustomValidity('Click me')" onclick="setCustomValidity('')">Zero<br>
<input type="radio" name="test" value="1" class="wrapper">One<br>
<input type="radio" name="test" value="2" class="wrapper">Two<br>
<input type="submit">
</form>
<form>
<input type="radio" id="test" name="test" value="0" oninvalid="this.setCustomValidity('Click me')" onclick="clearValidity();" required >Zero<br>
<input type="radio" name="test" value="1" onclick="clearValidity()" class="wrapper">One<br>
<input type="radio" name="test" value="2" onclick="clearValidity()" class="wrapper">Two<br>
<input type="submit">
</form>
<script>
function clearValidity()
{
document.getElementById('test').setCustomValidity('');
}
</script>
This can be written as a function to make it work on any type of <input>:
document.querySelectorAll('form *[data-custom-validity]').forEach(el => {
const firstInput = el.querySelector('input:first-of-type')
// set custom validity if first input is invalid
firstInput.addEventListener('invalid', () => firstInput.setCustomValidity(el.dataset.customValidity))
// listen on all inputs for a change
el.querySelectorAll('input').forEach(input =>
input.addEventListener('change', () => firstInput.setCustomValidity('')))
})
<form>
<div data-custom-validity="Click me.">
<input type="radio">
<input type="radio">
</div>
</form>
This worked for me, I'm leaving it here in case it helps anyone.
<div class="genero">
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="M">Masculino
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="F">Femenino
</div>