I want make radio button checked by default but it's not working in angular 6 when I use [(ngModel)]. It works fine as I expect in case of removing [(ngModel)]
my code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" value="1" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type1">Vendor</label>
</div>
</div>
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type2" name="user_type" class="custom-control-input" value="2" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type2">Customer</label>
</div>
</div>
</div>
I have also tried as
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" value="1" [checked]="true" [(ngModel)]="form.user_type" >
Thanks in advance.
Using [(ngModel)] you are binding the checkbox value to form.user_type property value. So the checked="true" is ignored.
It is the correct behaviour because data binding has priority respect to static properties.
If you want to make the checkbox checked by default you need to match value property and form.user_type
EDIT
Try putting value attribute between square brackets like follows:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type1" name="user_type" class="custom-control-input" [value]="1" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type1">Vendor</label>
</div>
</div>
<div class="col-md-4">
<div class="custom-control custom-radio">
<input type="radio" id="user_type2" name="user_type" class="custom-control-input" [value]="2" [(ngModel)]="form.user_type">
<label class="custom-control-label" for="user_type2">Customer</label>
</div>
</div>
</div>
Related
This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 4 years ago.
I'm using Bootstrap 4 and I'm trying to add three radio buttons as a list, I created this HTML structure:
<div class="mt-3 text-center">
<div class="custom-control custom-radio">
<input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
<label class="custom-control-label" for="manualLoading">Foooooo1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="dateLoading">Foo2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="periodLoading">Fooooo3</label>
</div>
</div>
The problem is that I get this:
This is a JSFIDDLE, how can I fix that?
A possible solution for your problem is using display:grid in the new class content-checkbox and eliminating the class custom-control-label
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.content-checkbox {
display: grid;
justify-content: center;
}
</style>
</head>
<body>
<div class="mt-3 text-center content-checkbox">
<div class="custom-control custom-radio">
<input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
<label class="custom-control-label" for="manualLoading">Foooooo1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="dateLoading">Foo2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
<label class="custom-control-label" for="periodLoading">Fooooo3</label>
</div>
</div>
</body>
</html>
UPDATE:
Add a new class called content-checkbox
I would suggest using default Bootstrap 4 classes for this purpose. Try the code below:
Default radio
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
I am trying to show validation message below horizontally aligned radio buttons in Bootstrap 4.1.3. Below is the default render:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
</div>
</div>
<hr>
I tried adding a break <br> and got this:
<hr>
<div class="">
<div class="col-sm text-center">
Please confirm that your eye color is:<br>
<span class="response" id="eye_color"></span>
</div>
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
<div class="invalid-feedback">
<br>Please select an option.
</div>
</div>
</div>
</div>
<hr>
But what I would really like is for the validation message to appear directly under the two horizontal radio buttons. I am using Bootstrap 4.1.3's validation for ease but for some reason can't figure this part out. Thanks!
I was just struggling with the same thing. This answer is probably too late for you, but hopefully it helps someone else. The validation message is displaying where it is because Bootstrap adds display: inline-flex; on a parent element when displaying horizontal forms, preventing it from dropping down to the next line.
I was able to relocate the invalid-feedback validation message outside the flex layout element, and have it continue to react to the validation (without any extra javascript) by placing a dummy radio button with the same name before it and hiding it with CSS. A bit hacky, but it works.
<div class="col-sm text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_yes" value="yes" name="eye_color" required>
<label class="form-check-label" for="eye_color_yes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="eye_color_no" value="no" name="eye_color" required>
<label class="form-check-label" for="eye_color_no">No</label>
</div>
<input type="radio" name="eye_color" style="display:none;" required>
<div class="invalid-feedback">
Please select an option.
</div>
</div>
I created a form only using Bootstrap 4 class. You can use this snippet for your desired result.
<div class="container">
<form >
<div class="col-sm-6">
Please confirm that your eye color is:
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Blue
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Black
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input">Grey
</label>
</div>
<div class="text-danger">
Please select color.
</div>
</form>
</div>
On the place of below code:
<div class="text-danger">
Please select color.
</div>
You can use below snippet it will look better for showing error messages:
<div class="alert alert-danger">
<strong>Warning!</strong> Please select color.
</div>
I have Bootrap 4 text input like this
<div class="col-2 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
And I want the checkbox label same vertical level as the text input and the check same vertical level and size as the text input. I have tried to swap the input and label code but nothing is working.
Checkbox code with custom checkbox.
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check</label>
</div>
I have it like this
But want it like this
You should wrap your boxes properly within a container
<div class="container">
<div class="row">
<div class="col-sm-4 form-group">
<label for="follow">Följande</label>
<input type="text" class="form-control" id="follow" name="Follow" placeholder="" value="" required>
<div class="invalid-feedback">
Vänligen fyll i Följande.
</div>
</div>
<div class="col-sm-4 form-group">
<label for="follow">Check</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1"></label>
</div>
</div>
</div>
</div>
I have an HTML form and I need to save the inserted data on a mongo database. What I have difficulties is to save data inserted by radio button and ckeckboxes.
Here is my HTML code:
<div class="form-group">
<label>Foto:</label>
<input class="form-control" type="text" name="animal[foto]" placeholder="image url">
</div>
<div class="form-group">
<label>Animal:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="dog" > Dog</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="cat"> Cat</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[tipo]" type="radio" value="other"> Other:</label>
<input type="text" class="form-control" name="animal[tipo]" placeholder="Which?">
</div>
</div>
<div class="form-group">
<label>Gender:</label>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Male"> Male</label>
</div>
<div class="form-check">
<label class="form-check-label"><input class="form-check-input" name="animal[sexo]" type="radio" value="Female"> Female</label>
</div>
How can I save what is select in radio btn?
First you have to get the value from the radio buttons.
If you are using a javascript library like jQuery, it's very easy:
alert($('input[name=animal[tipo]]:checked').val());
This code will select the checked input with animal[tipo] name, and gets it's value. Simple isn't it?
Then you can save it as you normally do
After clicking on a radio button if i click on other radio button the checked value is not getting deselected , where am i going wrong ?
I have added a fiddle here http://jsfiddle.net/Lv8xzkhs/
<fieldset>
<legend>Property Info</legend>
<div class="row">
<div class="col-md-3 col-xs-12">
<label>I want To:</label>
<div class="radio">
<label><input class="radio-inline" type="radio" >Sale</label>
<label><input class="radio-inline" type="radio" >Rent Out</label>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label for="sel1">Looking For:</label>
<select class="form-control" id="sel1">
<option>PentHouse</option>
<option>Villa</option>
<option>Plot</option>
<option>Studio</option>
</select>
</div>
<div class="col-md-3 col-xs-12">
<label>Location:</label>
<input type="text" class="form-control">
</div>
</div>
</fieldset>
Add name attribute to your radio btn
<label><input class="radio-inline" type="radio" name="yourgroup">Sale</label>
<label><input class="radio-inline" type="radio" name="yourgroup">Rent Out</label>
Fiddle: http://jsfiddle.net/Lv8xzkhs/1/
More info : http://www.w3.org/TR/html-markup/input.radio.html