I have created two radio button for gender, I want to display radio button checked that was previously selected.
I have added below code in Template
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
</div>
</div>
I have added below code in Component.
console.log(this.gender); // I am getting 'male' here.
this.editProfile = new FormGroup({
gender: new FormControl(this.gender || null)
});
Other value of the form is getting displayed but radio button is not getting checked.
You can write it like
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
{{form.value|json}}
</form>
It should work for you
Find a PLUNK here
I have found other solution. We can use below code
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
Related
How can I validate if gender was selected in angular, also I want the warning message to disappear once I select male or female.
I tried the code below but it works for inputs field such name or email
but for radio button it shows the error message even if I selected one option
this.registerForm = this._formBuilder.group({
gender: ['', Validators.required]
});
onSubmit() {
this.submitted = true;
// stop here if form is invalid
if (this.registerForm.invalid) {
return;
}
}
HTML
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="custom-control custom-radio">
<input type="radio" id="female" value="F" name="gender" required>
<label for="female">Female</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="male" value="M" name="gender"required>
<label for="male">Male</label>
</div>
<div *ngIf="submitted && f.gender.errors"
[ngClass]="{ 'd-block': submitted && f.gender.errors }">
<div *ngIf="f.gender.errors.required">Gender is required</div>
</div>
<button>Sign up</button>
You forgot to bind the inputs to the FormControl. Add formControlName="gender" to both inputs and it should work.
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
...
<input type="radio" id="female" value="F" name="gender" formControlName="gender">
...
<input type="radio" id="male" value="M" name="gender" formControlName="gender">
...
Cheers
I am building a CNN project for spectrogram images. The backend code is already finished, and I was told to make a GUI on HTML. I have this code for user to make a selection on epoch, learning rate, and architecture number.
<style>
label span {
display: inline-block;
margin-left: 10px;
}
</style>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<form action="{{ url_for('usertest') }}" method="post" enctype="multipart/form-data">
<h5>Choose Architecture</h5>
<hr style="width:50%;text-align:left;margin-left:0">
<p>Please choose one of the architecture below.</p>
<p>Note: We recommend you to choose two of our best architecture:</p>
<ol>
<li>Architecture 1, learning rate = 0.0001, epoch = 300</li>
<li>Architecture 4, learning rate = 0.00001, epoch = 300</li>
</ol>
<div class="form-group row">
<label for="input_arch" class="col-xl-2 col-form-label">Choose Architecture Value</label>
<div class="col-lg-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radioarch" value="1"><span>1</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="2"><span>2</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="3"><span>3</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioarch" value="4"><span>4</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="input_epoch" class="col-md-2 col-form-label">Choose Epoch Value</label>
<div class="col-md-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radioepoch" value="50"><span>50</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="100"><span>100</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="150"><span>150</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="200"><span>200</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="250"><span>250</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radioepoch" value="300"><span>300</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="input_lr" class="col-xl-2 col-form-label">Choose Learning Rate Value</label>
<div class="col-lg-10" style="padding-top:8px;">
<label class="radio-inline">
<input type="radio" name="radiolr" value="0.001"><span>0.001</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.0001"><span>0.0001</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.0002"><span>0.0002</span>
</label>
<label class="radio-inline" style="padding-left:15px;">
<input type="radio" name="radiolr" value="0.00001"><span>0.00001</span>
</label>
</div>
</div>
</div>
Based on my current output (image is attached below), I find that my radiobutton are not aligned neatly with each other. Is there any way to make the button looks aligned? If I have to add <table> tag, where should it? Or should I just omit the <div> tag and change it into another tag?
This is how my current output looks:
I want the output to look like this (this image is generated by Paint)
You can add a fixed width to each of them. Make sure that the width value considers the maximum text you have inside a radio option.
Alternatively you can consider flex-grid, they're a lot like tables, just that you don't need to add in very much HTML.
.radio-inline {
width: 100px;
}
I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.
You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>
There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later
I am trying to create selection when new user is created it will need a group. It is working nicely, but the "checked" option doesn't work for some reason. How can I make the "user" as checked so it would be true if create new user button is pressed?
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
<button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
With AngularJs best is use its directive:
ng-checked="variable"
I managed to make it checked with ng-init="groups.group=1" Because I need the value assigned to the radio. Is there something wrong using it this way?
Full code
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
Here is a working plunker: https://plnkr.co/edit/4VtblBSWROLTETW5Ie5C?p=preview
The core code:
$scope.groups = {
admin : false,
user: false,
viewer: false
};
And in the view:
<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
Note how each ng-model is bound to an object, ie: groups.admin, groups.user etc.
Could you please try by using ng-value
<label>
<input type="radio" ng-model="groups.group" value="1">
Admin
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="2">
User
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="3">
Viewer
</label><br/>
in controller
$scope.createUser = function(user, groups){
groups.group = "2";
};