How can I keep a checkbox checked after it's displayed on button click? Is this possible? Here is a working snippet.
.html
<a href="#tab1success" data-toggle="tab">
<h5>
<button mat-button class="btn filter" (click)="changeSummary()">Summary</button>
</h5>
</a>
<div id="tab1success">
<div *ngIf="bool">
<label class="btn btn-light btn-filter" id="bttns">
<input type="checkbox" name="name1" autoComplete="off"> check1
</label>
<label class="btn btn-light btn-filter" id="bttns">
<input type="checkbox" name="name2" autoComplete="off"> check2
</label>
</div>
</div>
.ts
bool = false
changeSummary() {
if (!this.bool) {
this.bool = true;
}
else {
this.bool = false;
}
}
Thank you for your time!
change
<div *ngIf="bool">
by
<div [hidden]="!bool">
I recommend you to go for handling this scenario using Forms API, which will be cleaner way to do this, either use template driven or model driven form. Remember the value inside component and as soon as template disabled, binding will take care of displaying what you have inside model.
//Create formSet object which will be holding all radio button
formSet = {};
Html
//Assign `ngModel` to each of input
<label class="btn btn-light btn-filter" id="bttns">
<input type="checkbox" [(ngModel)]="formSet.name" name="name2" autoComplete="off"> check1
</label>
<label class="btn btn-light btn-filter" id="bttns">
<input type="checkbox" [(ngModel)]="formSet.name2" name="name2" autoComplete="off"> check2
</label>
Demo
I'm not offensive about the accepted answer, but I personally can't digest to keep something inside DOM tree which is not visible. *ngIf was suitable there, rather using forms would suffice the purpose here.
Related
I have two radio buttons on my HTML page for gender selection (M or F).
How to retrieve which button was clicked in my typescript file? Here's the code
<form>
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<br>
<button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
On clicking the button, I want to assign M or F to a string in my typescript file.
You code is correct. No need to change anything.
This is your template code.
<form (ngSubmit)="onSubmit()">
<label>Gender</label>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button id="signup" type="submit">Signup</button>
</form>
In your .ts file,
export class TestComponent implements OnInit {
gender: string = "Male";
onSubmit() {
console.log(gender);
}
}
This will give you the selected gender value.
Because you have used two way binding. It updates the ngModel whenever the input changes.
you can retrieve which button click by add ngModelChange method
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Female
<br>
</div>
<button id="signup" class="btn btn-primary" type="submit" >Signup</button> </form>
in your ts file
youMethodName(model) {
console.log("TCL: youMethodName -> model", model)
}
Although, answer is already accepted. I want to give solution of this problem if you do not want to use Two way data binding. this way is useful for breaking down two way data binding. So, there is no need for [(ngModel)] . Complete Working Demo found here in StackBlitz Link
Your HTML ...
<form>
<fieldset id="group1">
<input type="radio" (change)="handleChange($event)" name="group1" value="Male"/>Male
<input type="radio" (change)="handleChange($event)" name="group1" value ="Female"/> Female
</fieldset>
<div *ngIf="_prevSelected"> {{ _prevSelected}} </div>
<button (click)="click()">Show</button>
<div *ngIf="clicked"> <span> selected value is {{_prevSelected}} </span></div>
</form>
Your class file is..
private _prevSelected: any;
clicked:boolean;
handleChange(evt) {
let target = evt.target;
if (target.checked) this._prevSelected = target.value;
}
click(){
this.clicked =true;
}
I have a button group in which I have tree inputs of type radio.
The reason I use these, is that in order to get the style template I have bought for my project working I must use the exact same elements.
The button group is controlling the size on a dynamic table, and I need an event fired when a button (input) is pressed
<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)" >
<label class="btn btn-success">
<input type="radio" name="options"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options"> 20
</label>
<label class="btn btn-success active">
<input type="radio" > 30
</label>
</div>
I am using Angular 2 so I have tried to bind the inputs with values (not shown) without luck...
Update
The answer marked as solved below only partially solved my problem as I could only press each input once. To solve this I did the following:
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
</label>
<label class="btn btn-success">
<input type="radio" style="display:none" value="20" (change)="pageSizechanged($event.target)"> 20
</label>
<label class="btn btn-success">
<input type="radio" value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
</label>
</div>
In the change event i pass the target along. I do this because i want to set checked to false:
pageSizechanged(target) {
this._pagesize = target.value;
target.checked = false;
...
}
Otherwise the inputs will remain checked and the change event will therefore not be fired. If someone have a better way to do this, please share :)
Not entirelly sure what you want to achieve, but if I understood correctly.
You can bind the radio buttons with ngModel and avoid the current click-events entirelly, and rather react to changes. The following template works, just define your tableSize variable in the component class.
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
</label>
<label class="btn btn-success active" >
<input type="radio" [(ngModel)]="tableSize" value="30"> 30
</label>
</div>
Current tableSize: {{tableSize}}
If you need an event, you can add a (change)="myFunc($event.target.value)" to the input tags as well.
I don't think radio inputs are currently well supported in angular2. (you seem to have to make your own component).
I have used them with a simple event handler on the (click) event, like so:
<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
<input type="radio"
name="options"
(click)="selectedChoice = choice"
[checked]="choice === selectedChoice" >
No
</label>
<label>
<input type="radio"
name="options"
[checked]="choice === selectedChoice"
(click)="selectedChoice = choice >
Yes
</label>
So if we initialise with selectedChoice='Yes', the second radio button will be selected. The [checked] attribute makes sure the selected radio button is checked and the (click) directive triggers the model change.
Button group is not working as it should, the problem is if the "ON" is selected, it should not be selected again, but the problem is even the "ON" button is selected I am able to select the ON button again.
How can I stop my button to stop any action when the button is already selected.
This is my code for my button group:
<form action="myclass.php" method="post">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-xs myOnbutton">
// myOnbutton is the button name
<input type="radio" autocomplete="off"> ON
</label>
<label class="btn btn-default btn-xs myOffbutton">
// myOffbutton is the button name
<input type="radio" autocomplete="off"> OFF
</label>
</div>
</form>
Do anyone knows where I am making the mistake, so it is selecting the button again.
This is basic HTML. It has nothing to do with bootstrap, you just need to add names to the checkboxes so you cant select both.
<label class="btn btn-default btn-xs myOnbutton">
<input type="radio" autocomplete="off" name="switch"> ON
</label>
<label class="btn btn-default btn-xs myOffbutton">
<input type="radio" autocomplete="off" name="switch"> OFF
</label>
if you want to disable the groups after first selection,you should use jquery like Plunker :
$(".btn-xs :radio").click(function(){
$(".btn-xs :radio").attr("disabled", true); //Disable all with the same name
});
and if you want to disable selected radio button only,Plunker :
$(".btn-xs :radio").click(function(){
$(this).attr("disabled", true); //Disable all with the same name
});
I have an Angular Dart component with the following html:
EDIT: For some reason some of my html did not copy properly. outside of the label tag I have:
<div class="btn-group btn-group-vertical" data-toggle="buttons">
`
<label ng-repeat="item in items" class="btn btn-primary btn-sm btn-block" ng-show="isItemVisible(item)">
<input type="radio" name="options" value="{{item}}" ng-model="selected">{{item}}
<span class="badge pull-right"><span class="glyphicon glyphicon-ok"></span></span>
</label>
</div>`
However, this never updates the model. I have also tried using onclick, ng-click, and ng-change with the same result- the functions never get called. Is there some directive that I'm using incorrectly?
Use Future in your ng-click so it will allow your model to get updated.
<input type="radio" name="options" value="{{item}}"
ng-model="selected" ng-click="radioButtonClicked();">{{item}}</input>
//Component Code:
void radioButtonClicked(){
new Future((){
//Use your selected model here.
});
}
$parent should do the trick. Here is working example:
HTML
<div>
<div ng-repeat="item in items">
<label for="{{item.name}}">{{item.name}}:</label>
<input id="{{item.name}}" type="radio" ng-model="$parent.$parent.selected" ng-value="item.value" />
</div>
<strong>Selected value:</strong> {{$parent.selected}} <br/>
</div>
Controller
$scope.items = [{
name:'Item1',
value: 'value1'
}, {
name:'Item2',
value: 'value2'
}, {
name:'Item3',
value: 'value3'
}];
$scope.selected = null;
I'm trying to add Parsley validation to a set of radio buttons contained within a Bootstrap 3 btn-group.
The issue is that the error wrapper that parsley injects (in my case set to a span) is appearing in between the two options (which are contained within a label) rather that outside the btn-group div.
This is illustrated in the sample below:
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">Yes</label>
<span class="help-block" id="parsley-id-multiple-BuyAgain"></span>
<label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">No</label>
</div>
</div>
Any suggestions as to how I can remedy this?
After digging through the source code, I noticed there was an "errorsContainer" option available when initialising Parsley.
After changing the initalisation function to:
$(".validate-form").parsley({
successClass: "has-success",
errorClass: "has-error",
classHandler: function (el) {
return el.$element.closest(".form-group");
},
errorsContainer: function (el) {
return el.$element.closest(".form-group");
},
errorsWrapper: "<span class='help-block'></span>",
errorTemplate: "<span></span>"
});
I now get the resulting html:
<div class="form-group">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">Yes</label>
<label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">No</label>
</div>
<span class="help-block" id="parsley-id-multiple-BuyAgain"></span>
</div>
Another response, which is equivqlent to #Jon response is to add a the data-parsley-errors-container attribute to your form.
<form data-parsley-errors-container=".form-group" data-parsley-validate="">
...
</form>