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;
Related
I have an edit form as below which contains data in the input fields.
<ng-form #infoForm="ngForm" novalidate>
<div>
<label for="firstName">First Name :</label>
<input type="text"
class="form-control"
id="firstName"
name="firstName"
[(ngModel)]="in.firstName">
</div>
<div>
<label for="lastName">Last Name :</label>
<input type="text"
autocomplete="on"
class="form-control"
id="lastName"
name="lastName"
[(ngModel)]="in.lastName">
</div>
<button type="button" class="btn btn-primary" (click)="updateInfo(infoForm.value)">Update
</button>
</ng-form>
And I have the function in the component as below:
updateInfo(info: any) {
console.log(info);
}
This form return all the values (to the console) in the form when the Update button clicked, but I want to submit only the edited values instead of whole form. How could I implement it?
For this you can pass the form instead of its value to 'updateInfo' function and process it there. If user change the control value its state becomes 'dirty' from 'touched/pristine' and we can filter controls based on that.
Change in html:
<button type="button" class="btn btn-primary" (click)="updateInfo(infoForm)">Update
</button>
Change in *.ts file:
updateInfo(info: NgForm) {
const changedValues = Object.keys(info.controls)
.filter(key => info.controls[key].dirty === true)
.map(key => {
return { control: key, value: info.controls[key].value }
});
console.log(changedValues);
}
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;
}
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.
Please see my code below and help me correct what I'm doing wrong:
$scope.more_work_counter=0;
$scope.appendWork = function(){
$scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="{{more_work_counter}}"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>');
$scope.more_work_counter++;
}
Below is the image of my DOM along with IDs I want to add in the input fields:
Judging by your sample code, you may want to add more fields to display in your html. You can use ng-repeat directive, check this plunk I've made
controller code:
$scope.fields = [
{id: 1}
];
$scope.addField = function(){
$scope.fields.push({
id : $scope.fields.length
});
}
html
<div ng-repeat="field in fields">
<input type="text" class="form-control more-work-fields" id="{{$index}}">
<button class="btn btn-danger del-more-work-btn">-</button>
</div>
<button ng-click="addField()">add field</button>
ok i did this and it worked... the old technique used in php so many times
$scope.appendWork = function(){
$scope.more_work=$sce.trustAsHtml($scope.more_work+'<input type="text" class="form-control more-work-fields" id="'+$scope.more_work_counter+'"><button class="btn btn-danger del-more-work-btn">-</button>'+'</br>');
$scope.more_work_counter++;
}
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
});