diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html
new file mode 100644
index 00000000..58f8efff
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html
@@ -0,0 +1,5 @@
+
+ Disabled
+ Disabled checked
+ Readonly
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts
new file mode 100644
index 00000000..c2271d20
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+ selector: 'app-checkbox-disabled-example',
+ imports: [IdsCheckboxComponent],
+ templateUrl: './checkbox-disabled-example.component.html',
+})
+export class CheckboxDisabledExampleComponent {}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts b/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts
new file mode 100644
index 00000000..1397740f
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-examples.ts
@@ -0,0 +1,109 @@
+import { CheckboxDisabledExampleComponent } from './checkbox-disabled-example/checkbox-disabled-example.component';
+import { CheckboxFormControlExampleComponent } from './checkbox-form-control-example/checkbox-form-control-example.component';
+import { CheckboxFormControlNameExampleComponent } from './checkbox-form-control-name-example/checkbox-form-control-name-example.component';
+import { CheckboxHintExampleComponent } from './checkbox-hint-example/checkbox-hint-example.component';
+import { CheckboxNgModelExampleComponent } from './checkbox-ng-model-example/checkbox-ng-model-example.component';
+import { CheckboxSizeExampleComponent } from './checkbox-size-example/checkbox-size-example.component';
+import { CheckboxStatesExampleComponent } from './checkbox-states-example/checkbox-states-example.component';
+import { CheckboxVariantsExampleComponent } from './checkbox-variants-example/checkbox-variants-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+export const CHECKBOX_EXAMPLES: IdsExampleDef[] = [
+ {
+ id: 'checkbox-variants',
+ title: 'EXAMPLES.CHECKBOX.VARIANTS.TITLE',
+ description: 'EXAMPLES.CHECKBOX.VARIANTS.DESCRIPTION',
+ component: CheckboxVariantsExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-sizes',
+ title: 'EXAMPLES.CHECKBOX.SIZES.TITLE',
+ description: 'EXAMPLES.CHECKBOX.SIZES.DESCRIPTION',
+ component: CheckboxSizeExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-size-example/checkbox-size-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-states',
+ title: 'EXAMPLES.CHECKBOX.STATES.TITLE',
+ description: 'EXAMPLES.CHECKBOX.STATES.DESCRIPTION',
+ component: CheckboxStatesExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-states-example/checkbox-states-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-disabled',
+ title: 'EXAMPLES.CHECKBOX.DISABLED.TITLE',
+ description: 'EXAMPLES.CHECKBOX.DISABLED.DESCRIPTION',
+ component: CheckboxDisabledExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-disabled-example/checkbox-disabled-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-hint',
+ title: 'EXAMPLES.CHECKBOX.HINT.TITLE',
+ description: 'EXAMPLES.CHECKBOX.HINT.DESCRIPTION',
+ component: CheckboxHintExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-ng-model',
+ title: 'EXAMPLES.CHECKBOX.NG_MODEL.TITLE',
+ description: 'EXAMPLES.CHECKBOX.NG_MODEL.DESCRIPTION',
+ component: CheckboxNgModelExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-form-control',
+ title: 'EXAMPLES.CHECKBOX.FORM_CONTROL.TITLE',
+ description: 'EXAMPLES.CHECKBOX.FORM_CONTROL.DESCRIPTION',
+ component: CheckboxFormControlExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts',
+ },
+ ],
+ },
+ {
+ id: 'checkbox-form-control-name',
+ title: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.TITLE',
+ description: 'EXAMPLES.CHECKBOX.FORM_CONTROL_NAME.DESCRIPTION',
+ component: CheckboxFormControlNameExampleComponent,
+ files: [
+ {
+ HTMLpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html',
+ TSpath: 'assets/examples/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts',
+ },
+ ],
+ },
+];
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html
new file mode 100644
index 00000000..318719f7
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.html
@@ -0,0 +1,10 @@
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts
new file mode 100644
index 00000000..5bdfdfd3
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-example/checkbox-form-control-example.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+ selector: 'app-checkbox-form-control-example',
+ imports: [
+ IdsButtonComponent,
+ IdsCheckboxComponent,
+ IdsErrorDefinitionDirective,
+ IdsErrorMessageComponent,
+ ReactiveFormsModule,
+ ],
+ templateUrl: './checkbox-form-control-example.component.html',
+})
+export class CheckboxFormControlExampleComponent {
+ public marketing = new FormControl(false);
+ public accepted = new FormControl(false, { validators: [Validators.requiredTrue] });
+
+ public onSubmit(event: Event): void {
+ event.preventDefault();
+ this.accepted.markAsTouched();
+ }
+}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html
new file mode 100644
index 00000000..42bf8e16
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.html
@@ -0,0 +1,10 @@
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts
new file mode 100644
index 00000000..e53e9e91
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-form-control-name-example/checkbox-form-control-name-example.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+ selector: 'app-checkbox-form-control-name-example',
+ imports: [
+ IdsButtonComponent,
+ IdsCheckboxComponent,
+ IdsErrorDefinitionDirective,
+ IdsErrorMessageComponent,
+ ReactiveFormsModule,
+ ],
+ templateUrl: './checkbox-form-control-name-example.component.html',
+})
+export class CheckboxFormControlNameExampleComponent {
+ public form = new FormGroup({
+ marketing: new FormControl(false),
+ accepted: new FormControl(false, { validators: [Validators.requiredTrue] }),
+ });
+
+ public onSubmit(): void {
+ this.form.controls.accepted.markAsTouched();
+ }
+}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html
new file mode 100644
index 00000000..ff345aee
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.html
@@ -0,0 +1,4 @@
+
+ I accept the terms and conditions
+ Accept the terms and conditions
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts
new file mode 100644
index 00000000..b2976832
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-hint-example/checkbox-hint-example.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsHintMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+ selector: 'app-checkbox-hint-example',
+ imports: [
+ IdsCheckboxComponent,
+ IdsHintMessageComponent,
+ ],
+ templateUrl: './checkbox-hint-example.component.html',
+})
+export class CheckboxHintExampleComponent {}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html
new file mode 100644
index 00000000..bcb1f6f7
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.html
@@ -0,0 +1,10 @@
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts
new file mode 100644
index 00000000..77df245d
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-ng-model-example/checkbox-ng-model-example.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { FormsModule, NgModel } from '@angular/forms';
+import { IdsButtonComponent } from '@i-cell/ids-angular/button';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+import { IdsErrorDefinitionDirective, IdsErrorMessageComponent } from '@i-cell/ids-angular/forms';
+
+@Component({
+ selector: 'app-checkbox-ng-model-example',
+ imports: [
+ FormsModule,
+ IdsButtonComponent,
+ IdsCheckboxComponent,
+ IdsErrorDefinitionDirective,
+ IdsErrorMessageComponent,
+ ],
+ templateUrl: './checkbox-ng-model-example.component.html',
+})
+export class CheckboxNgModelExampleComponent {
+ public marketing = false;
+ public accepted = false;
+
+ public onSubmit(accepted: NgModel): void {
+ accepted.control.markAsTouched();
+ }
+}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html
new file mode 100644
index 00000000..cad1b943
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.html
@@ -0,0 +1,6 @@
+
+ Dense
+ Compact
+ Comfortable
+ Spacious
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts
new file mode 100644
index 00000000..4aa5e2c0
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-size-example/checkbox-size-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+ selector: 'app-checkbox-size-example',
+ imports: [IdsCheckboxComponent],
+ templateUrl: './checkbox-size-example.component.html',
+})
+export class CheckboxSizeExampleComponent {}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html
new file mode 100644
index 00000000..4bb950d8
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.html
@@ -0,0 +1,5 @@
+
+ Unchecked
+ Checked
+ Indeterminate
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts
new file mode 100644
index 00000000..58a5f194
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-states-example/checkbox-states-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+ selector: 'app-checkbox-states-example',
+ imports: [IdsCheckboxComponent],
+ templateUrl: './checkbox-states-example.component.html',
+})
+export class CheckboxStatesExampleComponent {}
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html
new file mode 100644
index 00000000..a437d95a
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.html
@@ -0,0 +1,5 @@
+
+ Surface
+ Light
+ Dark
+
diff --git a/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts
new file mode 100644
index 00000000..b3d24106
--- /dev/null
+++ b/projects/demo/src/app/components-example/checkbox/checkbox-variants-example/checkbox-variants-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
+
+@Component({
+ selector: 'app-checkbox-variants-example',
+ imports: [IdsCheckboxComponent],
+ templateUrl: './checkbox-variants-example.component.html',
+})
+export class CheckboxVariantsExampleComponent {}
diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html
index a5263643..065ec98d 100644
--- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html
+++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.html
@@ -139,3 +139,9 @@ {{ "COMMON.STANDALONE" | translate }}
+
+
+ @for (example of checkboxExamples; track example.id) {
+
+ }
+
diff --git a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts
index 11532065..8815db51 100644
--- a/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts
+++ b/projects/demo/src/app/pages/checkbox/checkbox-demo.component.ts
@@ -4,6 +4,8 @@ import { ControlTableComponent } from '../../components/control-table/control-ta
import { DemoAndCodeComponent } from '../../components/tabs/demo-and-code/demo-and-code.component';
import { TryoutControlComponent } from '../../components/tryout/tryout-controls.component';
import { TryoutComponent } from '../../components/tryout/tryout.component';
+import { CHECKBOX_EXAMPLES } from '../../components-example/checkbox/checkbox-examples';
+import { IdsExampleViewerComponent } from '../../shared/ids-example-viewer/ids-example-viewer.component';
import { Component, inject } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -25,6 +27,7 @@ import { TranslateModule } from '@ngx-translate/core';
DemoAndCodeComponent,
TryoutControlComponent,
ControlTableComponent,
+ IdsExampleViewerComponent,
],
templateUrl: './checkbox-demo.component.html',
styleUrls: [
@@ -34,4 +37,5 @@ import { TranslateModule } from '@ngx-translate/core';
})
export class CheckboxDemoComponent {
protected _checkboxDemoService = inject(CheckboxDemoService);
+ public readonly checkboxExamples = CHECKBOX_EXAMPLES;
}
diff --git a/projects/demo/src/assets/i18n/en.json b/projects/demo/src/assets/i18n/en.json
index 3ffa9882..c1a61831 100644
--- a/projects/demo/src/assets/i18n/en.json
+++ b/projects/demo/src/assets/i18n/en.json
@@ -294,6 +294,40 @@
"FOOTER_BUTTON": "Learn more"
}
}
+ },
+ "CHECKBOX": {
+ "VARIANTS": {
+ "TITLE": "Checkbox variants",
+ "DESCRIPTION": "Checkboxes with different color variants: surface (default), light, and dark."
+ },
+ "SIZES": {
+ "TITLE": "Checkbox sizes",
+ "DESCRIPTION": "Checkboxes with different sizes: dense, compact (default), comfortable and spacious."
+ },
+ "STATES": {
+ "TITLE": "Checkbox states",
+ "DESCRIPTION": "Checkboxes can be unchecked, checked, or indeterminate."
+ },
+ "DISABLED": {
+ "TITLE": "Disabled and readonly",
+ "DESCRIPTION": "Disabled checkboxes cannot be changed. Readonly checkboxes keep their value but are not interactive."
+ },
+ "HINT": {
+ "TITLE": "Checkbox with hint",
+ "DESCRIPTION": "Checkboxes can project a hint message below the label."
+ },
+ "NG_MODEL": {
+ "TITLE": "Checkbox with ngModel",
+ "DESCRIPTION": "Bind checkboxes with Angular template-driven forms using ngModel. Use the required input to add a requiredTrue validator."
+ },
+ "FORM_CONTROL": {
+ "TITLE": "Checkbox with FormControl",
+ "DESCRIPTION": "Bind checkboxes with Angular reactive forms using FormControl. Use Validators.requiredTrue for a required checkbox."
+ },
+ "FORM_CONTROL_NAME": {
+ "TITLE": "Checkbox with formControlName",
+ "DESCRIPTION": "Bind checkboxes inside a FormGroup using formControlName. Use Validators.requiredTrue on the control; the required input cannot be used with formControlName."
+ }
}
}
}
diff --git a/projects/demo/src/assets/i18n/hu.json b/projects/demo/src/assets/i18n/hu.json
index 5ffa1001..f3b82408 100644
--- a/projects/demo/src/assets/i18n/hu.json
+++ b/projects/demo/src/assets/i18n/hu.json
@@ -290,6 +290,40 @@
"FOOTER_BUTTON": "Tudj meg többet"
}
}
+ },
+ "CHECKBOX": {
+ "VARIANTS": {
+ "TITLE": "Checkbox változatai",
+ "DESCRIPTION": "A checkbox komponens különböző változatai: surface (alapértelmezett), light és dark."
+ },
+ "SIZES": {
+ "TITLE": "Checkbox méretei",
+ "DESCRIPTION": "A checkbox komponens különböző méretei: dense, compact (alapértelmezett), comfortable és spacious."
+ },
+ "STATES": {
+ "TITLE": "Checkbox állapotai",
+ "DESCRIPTION": "A checkbox lehet unchecked, checked vagy indeterminate."
+ },
+ "DISABLED": {
+ "TITLE": "Disabled és readonly",
+ "DESCRIPTION": "A letiltott checkbox nem módosítható. A readonly checkbox megtartja az értékét, de nem interaktív."
+ },
+ "HINT": {
+ "TITLE": "Checkbox hint üzenettel",
+ "DESCRIPTION": "A checkbox label alá hint üzenet projektálható."
+ },
+ "NG_MODEL": {
+ "TITLE": "Checkbox ngModel-lel",
+ "DESCRIPTION": "A checkboxok Angular template-driven formokhoz ngModel-lel köthetők. A required input requiredTrue validatort ad a checkboxhoz."
+ },
+ "FORM_CONTROL": {
+ "TITLE": "Checkbox FormControl-lal",
+ "DESCRIPTION": "A checkboxok Angular reactive formokhoz FormControl-lal köthetők. Kötelező checkboxhoz a Validators.requiredTrue validatort használja."
+ },
+ "FORM_CONTROL_NAME": {
+ "TITLE": "Checkbox formControlName-mel",
+ "DESCRIPTION": "A checkboxok egy FormGroup-on belül formControlName-mel köthetők. Kötelező checkboxhoz a Validators.requiredTrue validatort használja; a required input formControlName-mel nem használható."
+ }
}
}
diff --git a/projects/widgets/checkbox/checkbox.component.html b/projects/widgets/checkbox/checkbox.component.html
index 3f99dfec..cf79bd1d 100644
--- a/projects/widgets/checkbox/checkbox.component.html
+++ b/projects/widgets/checkbox/checkbox.component.html
@@ -40,7 +40,7 @@
- @let messages = displayedMessages;
+ @let messages = _displayedMessages();
@if (messages) {
@switch (messages) {
diff --git a/projects/widgets/checkbox/checkbox.component.ts b/projects/widgets/checkbox/checkbox.component.ts
index 5843f613..6a0731df 100644
--- a/projects/widgets/checkbox/checkbox.component.ts
+++ b/projects/widgets/checkbox/checkbox.component.ts
@@ -288,7 +288,9 @@ export class IdsCheckboxComponent
}
}
- public get displayedMessages(): 'error' | 'hint' | undefined {
+ protected _displayedMessages = computed((): 'error' | 'hint' | undefined => {
+ this._controlState();
+
const control = this.controlDir()?.control;
if (
this._errorMessages().length > 0 &&
@@ -303,7 +305,7 @@ export class IdsCheckboxComponent
return 'hint';
}
return undefined;
- }
+ });
private _assertRequiredInputIsSupported(): void {
if (this.required() && this.controlDir() instanceof FormControlName) {