I need to know if a radio button has been selected to hide / show other options.
<input #r4 type="radio" name="x">
<span>Group</span>
<div class="subOption" *ngIf="r4.checked"></div>
div.subOption must be displayed when it has been selected.
it's correct?¿
I would just create a new boolean variable in the component, that you set as true when radio button has been checked. With that boolean you then display the div. So for example:
isChecked: boolean = false; // our new variable
<input type="radio" name="x" (click)="isChecked = true">
<div *ngIf="isChecked">
<!-- Your code here -->
</div>
EDIT: As to multiple radiobuttons... as mentioned in a comment, radio buttons seems at this point be kind of buggy with Angular. I have found the easiest way to deal with radio buttons seems to be using a form. So wrap your radio buttons in a form, like so:
<form #radioForm="ngForm">
<div *ngFor="let val of values">
<input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
</div>
</form>
whereas on radio button would look like the following in this example:
{
id: 1,
name: 'value1'
}
In the form there is a change event, from which we pick up the chosen radio button value.
(change)="changeValue(radioForm.value)"
Then I would just play with boolean and the value chosen:
changeValue(val) {
this.valueChosen = true; // shows div
this.chosenVal = val.name; // here we have the value chosen
}
A plunker to play with: here
Related
I am new to Angular. Need some help here. There are two radio buttons for two text fields:
<div class="col-1">
<label class="radio-container mb-0 mt-1">
<input id="Page_Color" name="Page_Color" type="radio" [(ngModel)]='Br.Page_IsGraphic'
[value]='false' (change)="updateRadioChangeValToObj('Page_IsGraphic','Page_IsGraphic','Page_GraphicName','Page_Color')">
<span class="checkmark"></span>
</label>
</div>
<div class="col-1">
<label class="radio-container mb-0 mt-1">
<input id="IsGraphic" name="IsGraphic" type="radio" (change)="updateRadioChangeValToObj('Page_IsGraphic','Page_Graphic','Page_GraphicName','PageColor')"
[(ngModel)]='Br.Page_IsGraphic' [value]='true'>
<span class="checkmark"></span>
</label>
</div>
In [(ngModel)]='Br.Page_IsGraphic' Br.Page_IsGraphic value is either true or false and that is dynamic and based on that the radio button is getting checked i think.
If it's true then the second radio button gets selected and if it's false then the 1st one.
Now the 1st text field had to be removed as per the requirement and I want the second radio button to be always selected by default.
Br.Page_IsGraphic value should be set to true before theis code gets executed for this to work? or is there another way.
I tried [checked]="true" and that did not work.
As I understand you have two radio button associated with two text field and want to show text fields based on radio buttons are checked or not
.html file
<input type="radio" [checked] = "isFirst === true" (change)="markFirst()"/> First
<input type="radio" [checked] = "isSecond === true" (change)="markSecond()"/>Second
<br><br>
<input type="text" placeholder="First" *ngIf="isFirst"/>
<br><br>
<input type="text" placeholder="Second" *ngIf="isSecond"/>
.ts file
export class AppComponent {
isFirst = false
isSecond = false
markFirst(){
this.isFirst = true
// this.isSecond = false If you want second to hide if one is shown
}
markSecond(){
this.isSecond = true
// this.isFirst = false If you want second to hide if one is shown
}
}
Working link
https://stackblitz.com/edit/angular-jkqvqz
I did this and it selected the checkbox by default:
[(ngModel)]='Br.Page_IsGraphic' [value]='Br.Page_IsGraphic'>
Trying to implement a checkbox where I can dynamically set the value (and have it appear in the box).
HTML
<mat-checkbox *ngIf="isReply()" class="col-2" formControlName="checkbox" [checked]="false" >CheckBox off</mat-checkbox>
<mat-checkbox *ngIf="!isReply()" class="col-2" formControlName="checkbox" >CheckBox</mat-checkbox>
materials.module.ts
addCheckbox() {
this.checkboxForm = this.fb.group({
'CheckBox':true,
main.module.ts
isReply(): boolean {
return: true;
}
There is a radio button that toggles isReply() off and on.
When I toggle isReply() on, I can see the CheckBox label change from "CheckBox" to "CheckBox off" but the checkbox status (visibly) does not change.
I can apply other logic which responds to the checkbox being off, even though the checkbox is still visibly checked (true). This changes the value of the checkbox to false, even though the checkbox is still visibly checked (true).
When I click on the checkbox (clear the visible box) the value toggles and the response is as expected, the value of checkbox is now true, even though the box is not checked.
I have made the following changes which STILL do not work
adjust this to:
<div class="row" *ngIf="isReply()">
<mat-checkbox class="col-2" formControlName="checkBox" >CheckBox</mat-checkbox>
</div>
<div class="row" *ngIf="!isReply()">
<mat-checkbox class="col-2" [checked]='true'
formControlName="checkBox" >CheckBox</mat-checkbox>
</div>
In the ts:
addCheckbox() {
this.checkboxForm = this.fb.group({
'checkBox':false,
I have two radio buttons (standard & reply).
The html for the radio buttons:
<form [formGroup]="materials.SignatureType">
<mat-radio-group formControlName="sigtype" >Signature Type:
<label><input type="radio" value="standard" formControlName="sigtype">
<span> Standard</span>
</label>
<label><input type="radio" value="reply" (click)="setBoxes()" formControlName="sigtype" >
<span> Reply</span>
</label>
</mat-radio-group>
The code for setBoxes():
if (this.isReply) {
this.materials.checkboxForm.value.checkBox = false;
}
else {
this.materials.checkboxForm.value.checkBox = true;
}
The click on "reply" radio button changes the value for the checkBox but does not change the state of the button.
I can not get the button state to change OTHER THAN to click on the checkbox.
Using Angular 7.2.3 [(ngModel)] is deprecated.
try:
In your component.html
<div class="container-fluid p-5 mt-2 mb-2" >
<mat-checkbox class="col-2" [checked]="var1" >CheckBox off</mat-checkbox>
<mat-checkbox class="col-2" [checked]="var2" >CheckBox</mat-checkbox>
</div>
In your component.ts file
var1 = false;
var2 = true
You just need binding checked property then you can change the value of var1 and var2 in your logic.
I was having this issue with my project.
I had my checkboxes wired up with the [checked]=... but I had missions getting it to work as expected. Which was to show non selected items as opacity: 40%; and have the box ticked next to the selected item.
eg. sometimes there would be a checked box and no selected items, or multiple checked boxes, or a selected item and no checked box... Very strange.
My conclusion; it's being set programatically and being over ridden by the click action.
TLDR;
My solution; change the click action configuration in the module providers by specifying:
MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'
this will leave any click actions in your hands for developer implementation.
Check the docs for more deets -> https://v6.material.angular.io/components/checkbox/overview
I have a list of Users to select for a team. Imagine that i select a User, he can either be active or inactive in his team. Now, if i don't select him at all, i should not be able to either activate or deactivate him.
This is made by a checkbox and a slider, like this:
When I click the checkbox, i need to disable the toggle. I have tried doing this by:
$("#2048").prop('disabled', true);
or
document.querySelector('[name="' + '#2048' + '"]').disabled = true;
Does not work either (And yes, i know that IDs should not be numbers, but it's because every toggle is inside a *ngFor. Still, i can use them as numbers, as jQuery can select them anyway)
Either way, i strongly believe that the only way to do something like this is to data-bind the 'disabled' attribute as some back-end variable that returns either a 'true' or 'false' value.
Something like:
<mat-slide-toggle
[id]='data.id'
class="status"
[disabled]='disableVariable'
>Active
</mat-slide-toggle>
and then:
disableVariable = someFunction(); //that returns true or false
This works, but the variable is 'too generic', i mean, every single slider will become disabled. Another problem is that this is not 'real-time', so i cant disable and enable multiple times.
Basically, it does not do the job.
What should i be doing here? If i had a way to select those tags using their unique ID's, that would fix the problem, but neither jQuery or Javascript's Query selector can disable or enable this tag.
EDIT:
A litle more of my code:
<div id="table" *ngFor="let data of User; let i = index">
<div [id]='data.id' *ngIf='data.user== 0' class="item">
<label class="container" style="width: 90%">
<input
type="checkbox"
*ngIf='data.status== 0'
id={{i}}
class="checkbox"
color=primary
checked>
<span class="checkmark"></span>
<div *ngIf='data.status== 0'>{{data.name}}
<mat-slide-toggle
[id]='data.id'
(change)=toggle(data.id)
*ngIf='data.status== 0'
color=primary
class="status"
>Active
</mat-slide-toggle>
</div>
</label>
</div>
</div>
When i add the ([ngModel)], my checkboxes stop working, and yes, i'm importing the FormsModule
You can use two-way binding to update the status of the checkbox as follows:
Add [(ngModel)] and disabled property to the input field
// Declare variable in component
CheckboxVar:boolean;
// In Html write below code
<input type="checkbox" [(ngModel)]="CheckboxVar" [disabled]="!CheckboxVar">
// Disabled checkbox when checkboxvar = false;
<input type="checkbox" [disabled]="!CheckboxVar">
Update CheckboxVar variable as per your need in your component.
Example with mat-slide-toggle
TS Code:
checked = false;
disabled = false;
HTML Code:
<input type="checkbox" [(ngModel)]="checked">
<mat-slide-toggle [disabled]="checked">
Slide me!
</mat-slide-toggle>
Now in the above example, if you checked the checkbox checked variable will be updated and if checked equals true then your toggle will be disabled.
If I understand the requirement correctly:
HTML Code:
<div *ngFor="let obj of list">
<mat-checkbox [(ngModel)]="obj.inTeam">In Team</mat-checkbox>
<br><br>
<mat-slide-toggle [(ngModel)]="obj.inTeam">Active</mat-slide-toggle>
</div>
TS Code:
list = [
{ id : 1,inTeam: false, isActive: false },
{ id : 3,inTeam: false, isActive: false },
{ id : 3,inTeam: false, isActive: false },
{ id : 4,inTeam: false, isActive: false }
]
StackBlitz
I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.
Working demo Here
JS Fiddle not working Here
Javascript
function injure() {
if (document.getElementById("f2").checked == true) {
document.getElementById("LocFall").style.display="block";
document.getElementById("f1").checked = false;
} else {
if (document.getElementById("f1").checked == true) {
document.getElementById("LocFall").style.display="none";
document.getElementById("f2").checked = false;
}
}
}
CSS
#LocFall {
display:none;
}
HTML
<input type="checkbox" id="f1" name="" onclick="injure();">
<label for="f1"> No </label><BR>
<input type="checkbox" id="f2" name="" onclick="injure();">
<label for="f2"> Yes</label><BR>
<div id="LocFall">
Show some stuff
</div>
http://jsfiddle.net/6NN6s/14/
<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>
function injure(cmb) {
if (cmb.checked) {
if(cmb.id==="f2")
{ document.getElementById("LocFall").style.display = "block";
document.getElementById("f1").checked = false;
}
else
{
document.getElementById("LocFall").style.display = "none";
document.getElementById("f2").checked = false;
}
}
}
try this out, may be what you need.
In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.
Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.
The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.
State 1: Nothing checked, user clicks f1 or f2
State 2: f1 checked, f2 clicked
State 3: f2 checked, f1 clicked
Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.
There's also the states of clicking the same box, but they are simple and your code handles them already.
I am trying to toggle the value of a checkbox using the following code:
<div class="control-group">
<label class="control-label checkbox" for="IsViewAsWebpage">
{{#if this.IsViewAsWebpage}}
<input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="true"/>
<input type="checkbox" class="enable-checkbox" checked />
{{else}}
<input type="hidden" id="IsViewAsWebpage" name="IsViewAsWebpage" value="false"/>
<input type="checkbox" class="enable-checkbox" />
{{/if}}
<span>View as Webpage</span>
</label>
</div>
'click .enable-checkbox': function (e) {
if (e.currentTarget.parentElement.htmlFor == "IsViewAsWebpage") {
this.$('#IsViewAsWebpage').is(':checked');
}
}
I know I am misssing something in the click function. I would basically want to toggle the checkbox value when the user clicks on it. Can someone point me to the right directions pls. Thank you.
When your checkbox gets clicked, it's going to toggle. That's the way checkboxes work.
If you want the hidden input to change value when the checkbox is toggled, I think what you want is this:
$(".enable-checkbox").change(function (e) {
if($(this).parent().attr("for") == "IsViewAsWebpage") {
var checked = $(this).is(":checked"); // Returns true/false.
$('#IsViewAsWebpage').attr("value", checked); // Sets true/false.
}
});
If you want to use handlebars.js to switch content when you click an check box, you will need to replace your content by calling handlebars each time you make a modification to your checkbox
$(".enable-checkbox").change(function (e) {
if($(this).parent().attr("for") == "IsViewAsWebpage") {
var checked = $(this).is(":checked");
IsViewAsWebpage = checked;
$("#yourcontainer").html(Handlebars.compile(yourtemplatesource));
}
}
then your IsViewAsWebpage variable should be global and your mustache condition should only be :
{{#if IsViewAsWebpage}}
But this is complicated for nothing... just use Aesthete solution, it will save you a lot of time.