Angular 5, TypeScript 2.7.1
Je n'arrive pas à cocher la case à cocher lors du renvoi d'un booléen. J'ai essayé, item.check
renvoie vrai ou faux.
<tr class="even" *ngFor="let item of rows">
<input value="{{item.check}}" type="checkbox" checked="item.check">
La case à cocher est toujours cochée lorsque coché est écrit dans l'entrée. Et cela ne sera pas décoché lorsque checked="false"
.
Existe-t-il un meilleur moyen de le faire avec des fonctions angulaires? comme ngModel ou ngIf ???
Solution
<input type="checkbox" [checked]="item.check == 'true'">
essayer:
[checked]="item.checked"
check out: Comment utiliser différents contrôles de formulaire en mode angulaire
Vous pouvez utiliser ceci:
<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">
Ici, record est le modèle pour la ligne en cours et status est une valeur booléenne.
Voici ma réponse
Dans row.model.ts
export interface Row {
otherProperty : type;
checked : bool;
otherProperty : type;
...
}
En .html
<tr class="even" *ngFor="let item of rows">
<input [checked]="item.checked" type="checkbox">
</tr>
En .ts
lignes: ligne [] = [];
mettre à jour les lignes dans composant.ts
J'espère que cela aidera quelqu'un à développer un composant de case à cocher personnalisé avec des styles personnalisés. Cette solution peut également être utilisée avec des formulaires.
HTML
<label class="lbl">
<input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)"
*ngIf="isChecked" checked>
<input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)"
*ngIf="!isChecked" >
<span class="chk-box {{isChecked ? 'chk':''}}"></span>
<span class="lbl-txt" *ngIf="label" >{{label}}</span>
</label>
checkbox.component.ts
import { Component, Input, EventEmitter, Output, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
const noop = () => {
};
export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
};
/** Custom check box */
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss'],
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CheckboxComponent implements ControlValueAccessor {
@Input() label: string;
@Input() isChecked = false;
@Input() disabled = false;
@Output() getChange = new EventEmitter();
@Input() className: string;
// get accessor
get value(): any {
return this.isChecked;
}
// set accessor including call the onchange callback
set value(value: any) {
this.isChecked = value;
}
private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;
writeValue(value: any): void {
if (value !== this.isChecked) {
this.isChecked = value;
}
}
onChange(isChecked) {
this.value = isChecked;
this.getChange.emit(this.isChecked);
this.onChangeCallback(this.value);
}
// From ControlValueAccessor interface
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
setDisabledState?(isDisabled: boolean): void {
}
}
checkbox.component.scss
@import "../../../assets/scss/_variables";
/* CHECKBOX */
.lbl {
font-size: 12px;
color: #282828;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
&.checked {
font-weight: 600;
}
&.focus {
.chk-box{
border: 1px solid #a8a8a8;
&.chk{
border: none;
}
}
}
input {
display: none;
}
/* checkbox icon */
.chk-box {
display: block;
min-width: 15px;
min-height: 15px;
background: url('/assets/i/checkbox-not-selected.svg');
background-size: 15px 15px;
margin-right: 10px;
}
input:checked+.chk-box {
background: url('/assets/i/checkbox-selected.svg');
background-size: 15px 15px;
}
.lbl-txt {
margin-top: 0px;
}
}
Utilisation
Formes extérieures
<app-checkbox [label]="'Example'" [isChecked]="true"></app-checkbox>
Formes intérieures
<app-checkbox [label]="'Type 0'" formControlName="Type1"></app-checkbox>