feat: add required-marker (#276)

Author: lukonik

projects/docs/src/app/examples/dialog/dialog-test/dialog-test.component.ts

@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ButtonComponent } from '@/ui/button/button.component';
 import { DialogCloseDirective } from '@/ui/dialog/dialog-close.directive';
 import { FormFieldComponent } from '@/ui/form-field/form-field.component';
-import { LabelComponent } from '@/ui/form-field/label/label.component';
+import { LabelComponent } from '@/ui/form-field/label.component';
 import { InputDirective } from '@/ui/input/input.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'doc-dialog-test',

projects/docs/src/app/examples/form-field/show-case-form-field/show-case-form-field.component.ts

@@ -1,14 +1,14 @@
-import { Component, effect, inject } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ButtonComponent } from '@/ui/button/button.component';
 import { DialogService } from '@/ui/dialog/dialog.service';
-import { ErrorComponent } from '@/ui/form-field/error/error.component';
+import { ErrorComponent } from '@/ui/form-field/error.component';
 import { FormFieldErrorRegistry } from '@/ui/form-field/form-field-error.registry';
 import { FormFieldComponent } from '@/ui/form-field/form-field.component';
-import { LabelComponent } from '@/ui/form-field/label/label.component';
+import { LabelComponent } from '@/ui/form-field/label.component';
 import { InputDirective } from '@/ui/input/input.directive';
 import { OptionComponent } from '@/ui/select/option.component';
 import { SelectComponent } from '@/ui/select/select.component';
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'doc-show-case-form-field',
@@ -56,11 +56,6 @@ export class ShowCaseFormFieldComponent {
       min: (error) =>
         `Min value is ${error.min}, but your value is ${error.actual}`,
     });
-
-    effect(() => {
-      const cont = this.group.controls.lastName;
-      console.log(cont.errors?.['required']);
-    });
   }
 
   register() {

projects/docs/src/app/examples/toast/show-case-toast/show-case-toast.component.ts

@@ -1,6 +1,6 @@
 import { ButtonComponent } from '@/ui/button/button.component';
 import { FormFieldComponent } from '@/ui/form-field/form-field.component';
-import { LabelComponent } from '@/ui/form-field/label/label.component';
+import { LabelComponent } from '@/ui/form-field/label.component';
 import { OptionComponent } from '@/ui/select/option.component';
 import { SelectComponent } from '@/ui/select/select.component';
 import {

projects/docs/src/app/features/form-field-page/form-field-page.component.ts

@@ -75,6 +75,12 @@ export class FormFieldPageComponent {
             description:
               'List of errors to ignore. This can be useful when you want to display most of the errors with error group, but handle specific errors with app-error and provide customized error messages',
           },
+          {
+            name: 'hideRequiredMarker',
+            type: 'boolean',
+            default: 'false',
+            description: 'Hides the required marker',
+          },
         ],
       },
       {

projects/docs/src/tree-structure.json

@@ -533,30 +533,14 @@
       "name": "form-field",
       "files": [
         {
-          "path": "form-field/error",
-          "name": "error",
-          "files": [
-            {
-              "path": "form-field/error/error.component.css",
-              "name": "error.component.css",
-              "language": "css"
-            },
-            {
-              "path": "form-field/error/error.component.html",
-              "name": "error.component.html",
-              "language": "html"
-            },
-            {
-              "path": "form-field/error/error.component.spec.ts",
-              "name": "error.component.spec.ts",
-              "language": "spec.ts"
-            },
-            {
-              "path": "form-field/error/error.component.ts",
-              "name": "error.component.ts",
-              "language": "ts"
-            }
-          ]
+          "path": "form-field/error.component.spec.ts",
+          "name": "error.component.spec.ts",
+          "language": "spec.ts"
+        },
+        {
+          "path": "form-field/error.component.ts",
+          "name": "error.component.ts",
+          "language": "ts"
         },
         {
           "path": "form-field/form-field-error.registry.spec.ts",
@@ -589,30 +573,14 @@
           "language": "ts"
         },
         {
-          "path": "form-field/label",
-          "name": "label",
-          "files": [
-            {
-              "path": "form-field/label/label.component.css",
-              "name": "label.component.css",
-              "language": "css"
-            },
-            {
-              "path": "form-field/label/label.component.html",
-              "name": "label.component.html",
-              "language": "html"
-            },
-            {
-              "path": "form-field/label/label.component.spec.ts",
-              "name": "label.component.spec.ts",
-              "language": "spec.ts"
-            },
-            {
-              "path": "form-field/label/label.component.ts",
-              "name": "label.component.ts",
-              "language": "ts"
-            }
-          ]
+          "path": "form-field/label.component.spec.ts",
+          "name": "label.component.spec.ts",
+          "language": "spec.ts"
+        },
+        {
+          "path": "form-field/label.component.ts",
+          "name": "label.component.ts",
+          "language": "ts"
         }
       ]
     },

projects/ngverse/src/lib/form-field/error/error.component.spec.ts projects/ngverse/src/lib/form-field/error.component.spec.ts

@@ -3,9 +3,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-error',
-  imports: [],
-  templateUrl: './error.component.html',
-  styleUrl: './error.component.css',
+  template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     trigger('toggle', [
@@ -21,6 +19,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   ],
   host: {
     '[@toggle]': 'true',
+    class: 'text-sm text-danger',
   },
 })
 export class ErrorComponent {}

projects/ngverse/src/lib/form-field/error/error.component.ts projects/ngverse/src/lib/form-field/error.component.ts

@@ -1,7 +1,12 @@
 <div class="relative mb-1.5 flex flex-col gap-1.5 pb-5">
   <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->
   <label class="flex flex-col gap-1.5">
-    <ng-content select="app-label"></ng-content>
+    <div class="flex items-center gap-1">
+      <ng-content select="app-label"></ng-content>
+      @if (!hideRequiredMarker() && hasRequiredValidation()) {
+        <span class="text-danger">*</span>
+      }
+    </div>
     <ng-content></ng-content>
   </label>
 

projects/ngverse/src/lib/form-field/error/error.component.css

@@ -8,10 +8,10 @@ import {
 } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
-import { ErrorComponent } from './error/error.component';
+import { ErrorComponent } from './error.component';
 import { FormFieldErrorRegistry } from './form-field-error.registry';
 import { FormFieldComponent } from './form-field.component';
-import { LabelComponent } from './label/label.component';
+import { LabelComponent } from './label.component';
 
 describe('FormFieldComponent', () => {
   let component: FormFieldTestComponent;

projects/ngverse/src/lib/form-field/error/error.component.html

@@ -15,9 +15,10 @@ import {
   NgControl,
   StatusChangeEvent,
   TouchedChangeEvent,
+  Validators,
 } from '@angular/forms';
 import { filter, merge, Subscription } from 'rxjs';
-import { ErrorComponent } from './error/error.component';
+import { ErrorComponent } from './error.component';
 import { FormFieldErrorRegistry } from './form-field-error.registry';
 
 @Component({
@@ -30,6 +31,7 @@ import { FormFieldErrorRegistry } from './form-field-error.registry';
 export class FormFieldComponent implements OnDestroy {
   silentErrors = input<string[] | undefined>();
   showErrors = input<boolean>(true);
+  hideRequiredMarker = input<boolean>(false);
 
   errors = signal<string[]>([]);
   invalid = signal(false);
@@ -38,6 +40,17 @@ export class FormFieldComponent implements OnDestroy {
     () => !this.showErrors() || this.errors().length === 0
   );
 
+  hasRequiredValidation = computed(() => {
+    const control = this.ngControl()?.control;
+    if (control) {
+      return (
+        control.hasValidator(Validators.required) ||
+        control.hasValidator(Validators.requiredTrue)
+      );
+    }
+    return false;
+  });
+
   private ngControl = contentChild(NgControl);
   private sub: Subscription | undefined;
   private errorRegistry = inject(FormFieldErrorRegistry);

projects/ngverse/src/lib/form-field/form-field.component.html

@@ -2,9 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-label',
-  imports: [],
-  templateUrl: './label.component.html',
-  styleUrl: './label.component.css',
+  template: '<ng-content></ng-content>',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LabelComponent {}