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>
Related
I have {{policy.isActiveInPolicyGroup}} which is Boolean, I want the radio input be checked if it was true.
<div ng-repeat="policy in item.policies">
<input type="radio" ng-model="item.selectedPolicy" id="policy_{{$index}}"
name="test" ng-value="policy.id">
<label class="custom-control-label" for="test">
{{item.name}}
</label>
</div>
The first thing you should know it's about value of inputs with radio type:
Recommended
the radio inputs can't define by Boolean, if inputs are more than 2 we can't define value as Boolean so we should set a different value for each of them.
Ex: <input type="radio" name="test" ng-value="1">, <input type="radio" name="test" ng-value="2"> , <input type="radio" name="test" ng-value="3">
Not Recommended
Note: Except when input number is 2: in this case we can set value false or true
Ex: <input type="radio" name="test" ng-value="true">, <input type="radio" name="test" ng-value="false">
radio input Note:
all radio inputs in one group should have same name
checkbox input:
inputs with checkbox type by default define with Boolean value because we can set different name for each of them, and result is checked [true] or not [false]
ng-model and ng-value
Radio input should have two attributes ng-model and ng-value that because in angularjs logic ng-model should equal ng-value and can't do it by one attribute.
Only set ng-model value like following:-
$scope.item.selectedPolicy = $scope.policy.id;
It will be checked if its ng-true value matched with its ng-model value.
DEMO of Radio Buttons that Use Boolean Values1
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
<fieldset>
<input type="radio" name="radio"
ng-model="model" ng-value="false">false<br>
<input type="radio" name="radio"
ng-model="model" ng-value="true">true<br>
</fieldset>
<fieldset>
<input type="checkbox" ng-model="model">check<br>
</fieldset>
model={{model}}
</body>
For more information, see
AngularJS <input type="radio" Directive API Reference
AngularJS <input type="checkbox" Directive API Reference
I have a input <input type="text" value="1" readonly id='aaa'/>.
I would like to give it a function when user check the box then can edit the value of id=aaa.
Sample:
<input type="text" value="1" readonly/> <input type="checkbox" /> Checked this if you want to edit the value.
Thank you.
Add an onchange event to the checkbox that changes to readOnly attribute of its previous sibling (the textfield)
<input type="text" value="1" readonly id="aaa" />
<input type="checkbox" onchange="getElementById('aaa').readOnly = !this.checked" />
Checked this if you want to edit the value.
You want to use JavaScript to change the readOnly property. Set it to the opposite of whether the checkbox is checked.
document.getElementById('checksome').addEventListener('click', function() {
var changeThis = document.getElementById('readsome');
changeThis.readOnly = !this.checked;
});
<input id="readsome" type="text" value="1" readonly>
<label><input id="checksome" type="checkbox"> Click this to edit</label>
The short story is that I need to use a toggle switch to determine which of my methods are gonna be called. So I'm guessing that you can get a Boolean, referring to whether the switch is on or off? but how do I get that?
So I've implemented a toggleswitch in html
<label class="switch">
<input type="checkbox" id="ToggleswitchId" >
<span class="slider round"></span>
</label>
I've seen somebody do something like this, with javascript.
var switchTrueFalse = document.getElementById('ToggleswitchId').checked
but all I get is "Property 'checked' does not exist on type HTMLElement"
checked is not a method. It is one of the <input> attributes which is a boolean.
So, document.getElementById('ToggleswitchId').checked returns true when it is checked
checked is a property of checkbox input which returns true or false.
function clickCheckbox() {
if (document.getElementById('ToggleswitchId').checked) {
console.log("check")
} else {
console.log("uncheck");
}
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onClick="clickCheckbox()" >call method
<span class="slider round"></span>
</label>
Since it is an input tag, try using HTMLInputElement instead of HTMLElement.
Try using this code instead, and see if it works:
document.getElementById("ToggleswitchId") as HTMLInputElement).checked
You need to call a JavaScript function on the check/uncheck of check box.
function test() {
var switchTrueFalse = document.getElementById('ToggleswitchId').checked;
console.log(switchTrueFalse);
}
<label class="switch">
<input type="checkbox" id="ToggleswitchId" onclick="test()" >
<span class="slider round"></span>
</label>
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 });
We currently use the following syntax for radio buttons:
<input type="radio" id="opt1" name="option" value="opt1" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="opt2" required/>
<label for="opt2">Description of Option Two</label>
The query-processing script receives the string "opt1", which it then needs to convert to the full-text description of the option. In PHP-speak, I get:
$_POST['option'] => "opt1"
I'd like to save that step and have the full text of the description to be submitted as the value:
$_POST['option'] => "Description of Option One"
Can this be done with HTML alone -- without resorting to JavaScript-rewriting hacks and without duplicating the description text in the HTML? Thanks!
Unfortunately not.
If you have control over the form, the best solution is to use the description for the value:
<input type="radio" id="opt1" name="option" value="Description of Option One" required/>
<label for="opt1">Description of Option One</label>
<input type="radio" id="opt2" name="option" value="Description of Option Two" required/>
<label for="opt2">Description of Option Two</label>
If you don't have control over the form, then javascript is your only solution, you could use a function like the below (either inside an onload event for the page or an onsubmit event on the form:
function radioUpdate() {
document.querySelectorAll('radio').forEach(function(input) {
input.value = document.querySelector('label[for="' + input.id + '"]').text();
});
};
No, it can't.
Consider generating the HTML from your server side code in the first place. You could write a PHP function that takes the label/value as a single argument.