When I implemented my html template, checked property of checkbox is not properly working.
My html file contains code like the following,
<div *ngIf="userPermissionObj" >
<label for="pm">Permissions:</label>
<div *ngFor="let pt of permissionType">
<label>
<input type="checkbox"
[value]="pt.id"
ng-checked="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" />
{{pt.name}}
</label>
</div>
How can I find out where I implemented in wrong way?
In new Angular ng-checked does not exists. To acheive the same, use [checked]:
<input type="checkbox" [checked]="'Your_condition_here' ? true : false" (change)="someMethod()"/>
Use [checked] instead of ng-checked (It is angularJS directive, not angular.io),
See example below,
<input type="checkbox"
[value]="pt.id"
[checked]="${userPermissionObj.sPermissionType} == ${pt.name} ? true : false" >
Related
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 });
I was wondering if it was possible to style an element using ngModelChange. I tried the following but that doesn't work
<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color]='#dbdbdb'" type="number">
I know that I could do something like
<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? error=true : error=false" type="number" [style.border-color]="error ? '#ff4d4d' : '#dbdbdb'">
But I want to remove if possible the 'error' attribute and assign directly the style to the input depending of the condition
Instead of handling ngModelChange, you could use normal style binding with the condition on counter, which has the same value as the $event parameter of ngModelChange:
<input [(ngModel)]="counter" [style.border-color]="counter > 2 ? '#ff4d4d' : '#dbdbdb'" class="input" type="number">
See this stackblitz for a demo.
I don't think that will be possible as we can't do property binding [style] inside an event binding (ngModelChange) as one is happening at the view and another at Model.
You can clean your code by adding function based approach.
HTML
<input class="input" [(ngModel)]="counter" (ngModelChange)="changeColor($event)" type="number" [style.border-color]="color" type="number">
.TS
color="dbdbdb";
changeColor(event) {
if(event > 2){
this.color = "#ff4d4d";
}else{
this.color = "#dbdbdb";
}
}
I have a variable that is either 1 or 0 called {{CurrentItem.STATUS}}
How do I make the checkbox checked/unchecked depending on the value of {{CurrentItem.STATUS}}. 1 = Checked & 2 = Unchecked. I would prefer an Angular solution that doesn't need any javascript/typescript.
Something like this would be perfect:
<input type="checkbox" checked="{{CurrentItem.STATUS}} == 1">
You can use two-way data binding with ngModel
<input type="checkbox" [(ngModel)]="CurrentItem.STATUS">
This will work as 0 is considered Falsy in JS
This works:
<input type="checkbox" [checked]="CurrentItem.STATUS == 1">
<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)
I am trying to change the add a class "isChecked" to the parent div whenever a checkbox is checked. For that I am trying to use ngClass directive.
HTML
<div ng-class="{isChecked: (isChecked_1 == 'true')}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
CSS
.isChecked{
background-color: #428bca;
color: white;
}
But this isn't working. Can someone point out my mistake or suggest some better method.
When the user checks a checkbox angularJS sets the model to the boolean value true. In your code you compare this to the string 'true' which evaluates to false. Thus, you have to compare it to the boolean true. This is different from if statements where the string 'true' evaluates to true.
Moreover you don't need the manual comparision at all, as it's only purpose is to yield a boolean value. You can change your code to:
<div ng-class="{isChecked: isChecked_1}">
<input type="checkbox" id="check_1" ng-model="isChecked_1"/>
<label class="label_1" for="check_1">This is a label</label>
</div>
Solved it.
By changing the 'true' to just true , it worked.
So the new code is:
<div ng-class="{isChecked: (isChecked_1 == true)}">
<input type="checkbox" id="check_1" ng-model="isChecked_1" />
<label class="label_1" for="check_1">This is a label</label>
</div>
Anyone has idea what us is the difference between variable == 'true' and variable == true ?
You can use jquery for it. it has methods to add and remove css classes depending upon certain conditions