My html code,
<div>
<div>
<input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
<label class="label" for="Checkbox0" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
<label class="label" for="Checkbox1" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
<label class="label" for="Checkbox2" >first</label>
</div>
</div>
<div>
<div>
<input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
<label class="label" for="Checkbox3" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
<label class="label" for="Checkbox4" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
<label class="label" for="Checkbox5" >first</label>
</div>
</div>
Likewise I have two more separate divs in the same html file which contains checkboxes. What I need to do is onclick of first checkbox in first div ,I need to disabled every other checkboxes from the first div,second div & third.
As I'm totally new to angular I have no idea how to disable here. I have tried using ng-disabled but it seems not working. Can someone help me with this?
For Angular 2+, you can enable / disable the checkbox by setting the disabled attribute on the input type=checkbox
Use: [attr.disabled]="isDisabled ? true : null"
Note here that [attr.disabled]="isDisabled alone will not work. You will need to explicitly set disabled attribute to null for removing disabled attribute from the disabled checkbox.
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />
ng-disabled is AngularJS syntax. You can use [disabled] input for disable checkboxes.
<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
in .ts isDisabled : boolean;
Optional thing
You can use Angular Material for your developments. because it has many advantages. And also it has well defined API.
<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.
Angular Material
You can use the [disable] attribute your input[type="checkbox"] tag.
For eg: -
<input [disabled]="isDisabled" type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
isDisabled variable will hold the boolean value in your .ts
For larger, more complex forms I highly recommend using a reactive form. With a reactive form, you can use [disabled]="condition" where the condition is something like whateverCheckbox.value.
UPDATE:
I updated my answer to use whateverCheckbox.value as opposed to whateverCheckbox.checked. This approach only works with reactive forms. I highly recommend using reactive forms for larger, more complex forms where you may need more detailed, personalized control over the elements of the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data.
Here is the documentation: https://angular.io/guide/reactive-forms
Once you have the form set up as a reactive form, a form control instantiated and bound to the checkbox input form element, you should be able to access the value of the checkbox as indicated above.
UPDATE 2: You don't necessarily need to use a form either to take advantage of a reactive form control.
In your component.ts file import FormControl from #angular/forms as below:
import { FormControl } from '#angular/forms';
Then declare the form control in the component class, as such:
checkbox1 = new FormControl('');
Then in your template, simply bind that FormControl to the input element as such:
<input type="checkbox" [formControl]="checkbox1">
and then you should be able to access that value anywhere using:
checkbox1.value
If you are using reactive forms you can also disable the checkbox from the component like this
import { FormBuilder, FormGroup } from '#angular/forms';
constructor(private _fb: FormBuilder) { }
myForm: FormGroup;
ngOnInit(): void {
this.myForm = this._fb.group({
myCheckBoxInput: [{value: 1, disabled: true}],
});
}
in reactive form, you can disable the checkbox like so
this.formGroup.get('Checkbox1').disable({ onlySelf: true });
Related
I would like to change a boolean value inside the component file with a simple checkbox. If it is not checked it should remain false, otherwise it should be true.
Component:
export class UsersComponent {
public Personal: boolean = false;
}
HTML:
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal"/>
Personal
</label>
Since you have added 2 way binding in html [(ngModel)]="Personal", it should assign automatically
check via
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal"/>
{{Personal}}
</label>
You can use these to toggle the value of the Personal
HTML:
<label>
<input type="checkbox" [checked]="Personal" (change)="mPersonal = !Personal" /> Checked + Change
{{Personal}}
</label>
Correct For 2 way binding :
<label>
<input type="checkbox" name="Personal" [(ngModel)]="Personal" />
{{Personal}}
</label>
I have two checkboxes in my html as follows:
<label><input type="checkbox" id="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" id="checkbox2" /> Folder 2: </label>
but I'm unsure of how to retrieve the checkbox values inside my Typescript file. I know I can accomplish this by calling a separate function for each checkbox and changing a value within my typescript. However, that doesn't seem like the best way - if I had ten different checkboxes then I would need 10 different functions in my typescript.
Is there a simply way to get whether the checkbox is on or off based on the id? Is there a better way than that?
If you want to two-way-bind the checkbox, you should use ngModel binding.
<input type="checkbox" [(ngModel)]="checkBoxValue" />
and in your component's class:
export class AppComponent {
checkboxValue: boolean = false;
}
you may bind to checked property of input element like below,
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>
<label><input type="checkbox" [checked]="checkbox1" /> Folder 1: </label>
<label><input type="checkbox" [checked]="checkbox2" /> Folder 2: </label>
`
})
export class AppComponent {
name = 'Angular';
checkbox1 = false;
checkbox2 = true;
}
Here is the Plunker.
Hope this helps!!
You can use [value]="myVariable" in checkboxes!
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>
Does anyone know what is the proper CSS selector for selected (:checked) AngularUI's radio button? I tried "checked", "selected", "active", but none of this does the work. I need to find a similar selector as :checked for HTML radio button.
Every useful answer / JSFiddle is highly appreciated and evaluated.
Thank you.
If it's styling you're after then use ng-class bound to the ng-model:
<input type="checkbox" ng-model='stuff' ng-class='{class1: stuff, class2: !stuff}'>
and add css rules for classes class1 and class2
Since you are using angularjs,instead of using jquery selectors like :checked or :active,you can just use the angularjs functionalities to detect the active checkbox.
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-click="yourFunction()" ng-model="formData.favoriteColors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
cosider this as your checkboxes,now in your js (ie)your controller
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.yourFunction = function() {
/**function to call when a checkbox with model formdata.favourite colors.red is selected **/
};
});
Notice I have include functions for only one checkbox.You can do it for each of these check boxes
You might find this fiddle useful
http://jsfiddle.net/ShinyMetilda/C9V39/
Also this example in the documentation will be usefull
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
I have check box at UI side on which i want to bind data coming from web service in form of jason
Html code:
<label class="checkbox-inline nopaddingleft" for="radio1">
<input name="radio1" type="checkbox" id="radio1"
class="checkbox-inline margin-right-five"
value="name" checked={{insuredProfile.isScrubbed}} />Scrub
</label>
The value i want to bind is:{{insuredProfile.isScrubbed}} it will be true or false
Thanks in advance
In your view use ngChecked.
In your controller you'll need to have something like:
$scope.insuredProfile = { isScrubbed: true };
You have to use ng-model for the checkbox input.
ng-model="insuredProfile.isScrubbed"