feat: fields

rbalet · Feb 15, 2025 · eedbbbc · eedbbbc
1 parent 363d11c
commit eedbbbc
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 14 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,13 @@
   "singleQuote": true,
   "trailingComma": "all",
   "semi": false,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
 }
diff --git a/README.md b/README.md
@@ -75,15 +75,16 @@ imports: [NgxMatBirthdayInputComponent];
 
 ## Options
 
-| Options         | Type            | Default                | Description                            |
-| --------------- | --------------- | ---------------------- | -------------------------------------- |
-| formControlName | `FormControl`   | `undefined`            | Control to be updated                  |
-| autocomplete    | `"on" or "off"` | `"on"`                 | Use the default browser autofill       |
-| labels          | `string[]`      | `["DD", "MM", "YYYY"]` | Label used by the mat-input            |
-| placeholders    | `string[]`      | `["", "", ""]`         | with an *s*                            |
-| required        | `boolean`       | `undefined`            |                                        |
-| disabled        | `boolean`       | `undefined`            |                                        |
-| min             | `date`          | `undefined`            | Activate min validators on each fields |
+| Options         | Type                                            | Default                                | Description                            |
+| --------------- | ----------------------------------------------- | -------------------------------------- | -------------------------------------- |
+| formControlName | `FormControl`                                   | `undefined`                            | Control to be updated                  |
+| autocomplete    | `"on" or "off"`                                 | `"on"`                                 | Use the default browser autofill       |
+| labels          | `string[]`                                      | `["DD", "MM", "YYYY"]`                 | Label used by the mat-input            |
+| placeholders    | `string[]`                                      | `["", "", ""]`                         | with an *s*                            |
+| required        | `boolean`                                       | `undefined`                            |                                        |
+| disabled        | `boolean`                                       | `undefined`                            |                                        |
+| min             | `date`                                          | `undefined`                            | Activate min validators on each fields |
+| fields          | `{day: boolean, month: boolean, year: boolean}` | `{day: true, month: true, year: true}` | Show specifies fields                  |
 
 ## Css variable
 | Name                           | Default | Explanation                       |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-birthday-input",
-  "version": "19.2.1",
+  "version": "19.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/projects/ngx-mat-birthday-input-tester/src/app/app.component.html b/projects/ngx-mat-birthday-input-tester/src/app/app.component.html
@@ -37,6 +37,20 @@ <h1>Mat birthday Input example</h1>
   </mat-form-field>
 </form>
 
+<form #f2="ngForm" [formGroup]="emptyBirthdayForm">
+  <mat-form-field floatLabel="always" class="no-border">
+    <mat-label>Hidden year</mat-label>
+
+    <!-- @TODO : add max -->
+    <ngx-mat-birthday-input
+      formControlName="birthday"
+      id="birthday"
+      appearance="outline"
+      [fields]="{ day: true, month: true, year: false }"
+    ></ngx-mat-birthday-input>
+  </mat-form-field>
+</form>
+
 <div class="buttons-container">
   <button mat-stroked-button (click)="emptyBirthdayForm.reset(); filledBirthdayForm.reset()">
     Reset

diff --git a/projects/ngx-mat-birthday-input/package.json b/projects/ngx-mat-birthday-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-birthday-input",
-  "version": "19.0.0",
+  "version": "19.3.0",
   "author": {
     "name": "Raphaël Balet",
     "email": "raphael.balet@outlook.com"

diff --git a/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.html b/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.html
@@ -1,4 +1,5 @@
 <form class="ngxMatBirthdayInput-form" [formGroup]="itemForm" [autocomplete]="autocomplete">
+  @if(fields.day) {
   <mat-form-field class="day-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[0] }}</mat-label>
     <input
@@ -12,6 +13,7 @@
       [placeholder]="placeholders[0]"
     />
   </mat-form-field>
+  } @if(fields.month) {
   <mat-form-field class="month-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[1] }}</mat-label>
     <input
@@ -26,6 +28,7 @@
       #monthInput
     />
   </mat-form-field>
+  } @if(fields.year) {
   <mat-form-field class="year-input" subscriptSizing="dynamic" [appearance]="appearance">
     <mat-label *ngIf="labels">{{ labels[2] }}</mat-label>
     <input
@@ -39,8 +42,7 @@
       #yearInput
     />
   </mat-form-field>
-
-  @if (matDatepicker) {
+  } @if (matDatepicker) {
   <input
     class="ngxMatBirthdayInput-hidden"
     placeholder="dd/mm/yyyyy"

diff --git a/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.ts b/projects/ngx-mat-birthday-input/src/lib/ngx-mat-birthday-input.component.ts
@@ -97,6 +97,12 @@ export class NgxMatBirthdayInputComponent
   @Input() matDatepicker?: MatDatepicker<any>
   @Input() yearMethod: (value: string, controls: any) => void = this._yearMethod
 
+  @Input() fields = {
+    day: true,
+    month: true,
+    year: true,
+  }
+
   private _min!: Date
   @Input() set min(value: Date) {
     this._min = value