diff --git a/projects/element-ng/form/si-form-item/si-form-item.component.html b/projects/element-ng/form/si-form-item/si-form-item.component.html
index c60de3c22..4e144656c 100644
--- a/projects/element-ng/form/si-form-item/si-form-item.component.html
+++ b/projects/element-ng/form/si-form-item/si-form-item.component.html
@@ -17,27 +17,25 @@
}
- @if (label()) {
- @let labeledBy = formItemLabelledBy;
- @if (labeledBy) {
- {{ label()! | translate }}
- } @else {
-
- }
+ @let labeledBy = formItemLabelledBy;
+ @if (labeledBy) {
+ {{ label()! | translate }}
+ } @else {
+
}
diff --git a/projects/element-ng/form/si-form-item/si-form-item.component.spec.ts b/projects/element-ng/form/si-form-item/si-form-item.component.spec.ts
deleted file mode 100644
index c1931e512..000000000
--- a/projects/element-ng/form/si-form-item/si-form-item.component.spec.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SiFormItemComponent } from './si-form-item.component';
-
-@Component({
- imports: [SiFormItemComponent],
- template: `
-
-
-
- `,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TestHostComponent {
- readonly formItem = viewChild.required(SiFormItemComponent);
- readonly label = signal(null);
-}
-
-describe('SiFormItemComponent', () => {
- let component: TestHostComponent;
- let fixture: ComponentFixture;
-
- const getLabel = (): HTMLElement | null => {
- return fixture.nativeElement.querySelector('label');
- };
-
- beforeEach(waitForAsync(() => {
- TestBed.configureTestingModule({
- imports: [TestHostComponent]
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(TestHostComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', fakeAsync(() => {
- expect(component).toBeDefined();
- expect(getLabel()).toBeDefined();
- }));
-
- it('should display the bound label value', () => {
- component.label.set('Testlabel');
- fixture.detectChanges();
- expect(getLabel()?.textContent).toContain(component.formItem().label());
- });
-
- it('should not display label colon with no label set', () => {
- fixture.detectChanges();
- expect(getLabel()).toBeFalsy();
- });
-
- it('should not display label colon with empty label set', () => {
- component.label.set('');
- fixture.detectChanges();
- expect(getLabel()).toBeFalsy();
- });
-
- it('should not display label colon with undefined label set', () => {
- component.label.set(undefined);
- fixture.detectChanges();
- expect(getLabel()).toBeFalsy();
- });
-
- it('should not display label colon with null label set', () => {
- component.label.set(null);
- fixture.detectChanges();
- expect(getLabel()).toBeFalsy();
- });
-});
diff --git a/projects/element-ng/form/si-form-item/si-form-item.component.ts b/projects/element-ng/form/si-form-item/si-form-item.component.ts
index d42b974ad..692da9287 100644
--- a/projects/element-ng/form/si-form-item/si-form-item.component.ts
+++ b/projects/element-ng/form/si-form-item/si-form-item.component.ts
@@ -28,7 +28,7 @@ import {
ValidationErrors,
ValidatorFn
} from '@angular/forms';
-import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
import { SiFormFieldsetComponent } from '../form-fieldset/si-form-fieldset.component';
import { SiFormContainerComponent } from '../si-form-container/si-form-container.component';
@@ -65,7 +65,7 @@ export class SiFormItemComponent
* The label to be displayed in the form item.
* It will be translated if a translation key is available.
*/
- readonly label = input();
+ readonly label = input.required();
/**
* A custom width value to be applied to the label.
diff --git a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html
index ebbe2460b..c95f0adcd 100644
--- a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html
+++ b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html
@@ -1,6 +1,6 @@
diff --git a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts
index d66ecaa2a..b1fc37c05 100644
--- a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts
+++ b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts
@@ -14,10 +14,6 @@ import { SiFormlyFormFieldProviderDirective } from './si-formly-form-field-provi
templateUrl: './si-formly-wrapper.component.html'
})
export class SiFormlyWrapperComponent extends FieldWrapper {
- protected get label(): string | undefined {
- return this.props.label && this.props.hideLabel !== true ? this.props.label : undefined;
- }
-
protected get labelWidth(): number | undefined {
return this.props.labelWidth;
}
diff --git a/src/app/examples/si-formly/si-dynamic-form-fields.ts b/src/app/examples/si-formly/si-dynamic-form-fields.ts
index d3578f84d..541d8c6bd 100644
--- a/src/app/examples/si-formly/si-dynamic-form-fields.ts
+++ b/src/app/examples/si-formly/si-dynamic-form-fields.ts
@@ -446,7 +446,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Button function handler',
clickListener: (a: string, b: string) => {
alert(
@@ -461,7 +460,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Button expression handler',
clickListener: 'formState.btnClicked',
clickArgs: ['1st', 23]
@@ -472,7 +470,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Primary',
clickListener: 'formState.btnClicked',
clickArgs: ['primary', 23],
@@ -484,7 +481,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Secondary (Default)',
clickListener: 'formState.btnClicked',
clickArgs: ['secondary', 23],
@@ -496,7 +492,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Tertiary',
clickListener: 'formState.btnClicked',
clickArgs: ['tertiary', 23],
@@ -508,7 +503,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Warning',
clickListener: 'formState.btnClicked',
clickArgs: ['warning', 23],
@@ -520,7 +514,6 @@ export class SampleComponent {
type: 'button',
className: 'd-block mb-4',
props: {
- hideLabel: true, // Hide wrapper label
label: 'Danger',
clickListener: 'formState.btnClicked',
clickArgs: ['danger', 23],