Merge pull request #482 from hmcts/cot-900_date_validation

cot-900 improving date validation

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/rpx-xui-common-lib",
-  "version": "2.0.33",
+  "version": "2.0.34",
   "engines": {
     "node": ">=18.19.0"
   },

projects/exui-common-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/rpx-xui-common-lib",
-  "version": "2.0.33",
+  "version": "2.0.34",
   "peerDependencies": {
     "launchdarkly-js-client-sdk": "^3.3.0",
     "ngx-pagination": "^3.2.1",

projects/exui-common-lib/src/lib/gov-ui/components/gov-uk-date/gov-uk-date.component.html

@@ -22,7 +22,7 @@
             <input class="govuk-input govuk-date-input__input govuk-input--width-2"
                    [ngClass]="{'govuk-input--error': errorMessage?.isInvalid}"
                    [id]="config.id+'-day'"
-                   [name]="config.id+'-day'" type="number" value="" pattern="[0-9]*"
+                   [name]="config.id+'-day'" type="text" value="" pattern="\d*" maxlength="2"
                    [formControlName]="config.id+'_day'">
           </div>
         </div>
@@ -34,7 +34,7 @@
             <input class="govuk-input govuk-date-input__input govuk-input--width-2"
                    [ngClass]="{'govuk-input--error': errorMessage?.isInvalid}"
                    [id]="config.id+'-month'"
-                   [name]="config.id+'-month'" type="number" value="" pattern="[0-9]*"
+                   [name]="config.id+'-month'" type="text" value="" pattern="\d*" maxlength="2"
                    [formControlName]="config.id+'_month'">
           </div>
         </div>
@@ -46,7 +46,7 @@
             <input class="govuk-input govuk-date-input__input govuk-input--width-4"
                    [ngClass]="{'govuk-input--error': errorMessage?.isInvalid}"
                    [id]="config.id+'-year'"
-                   [name]="config.id+'-year'" type="number" value="" pattern="[0-9]*"
+                   [name]="config.id+'-year'" type="text" value="" pattern="\d*" maxlength="4"
                    [formControlName]="config.id+'_year'">
           </div>
         </div>

projects/exui-common-lib/src/lib/gov-ui/components/gov-uk-date/gov-uk-date.component.spec.ts

@@ -87,6 +87,21 @@ describe('GovUkDateComponent', () => {
     expect(component.formGroup.status).toBe('INVALID');
   });
 
+  it('should not pass validation for an invalid date with decimal place', () => {
+    const dateValidator = component.DateValidator();
+    component.formGroup = new FormGroup({
+      id_day: new FormControl('', dateValidator),
+      id_month: new FormControl('', null),
+      id_year: new FormControl('', null)
+    });
+    component.formGroup.get('id_day').patchValue('1.');
+    component.formGroup.get('id_month').patchValue('13');
+    component.formGroup.get('id_year').patchValue('2021');
+    fixture.detectChanges();
+
+    expect(component.formGroup.status).toBe('INVALID');
+  });
+
   it('should fail validation if the day is blank (empty string)', () => {
     const dateValidator = component.DateValidator();
     component.formGroup = new FormGroup({

projects/exui-common-lib/src/lib/gov-ui/components/gov-uk-date/gov-uk-date.component.ts

@@ -64,6 +64,13 @@ export class GovUkDateComponent implements OnInit {
       if (this.isOptional && this.isEmpty(day) && this.isEmpty(month) && this.isEmpty(year)) {
         return null;
       }
+      const validDay = this.formGroup.get(this.day).valid;
+      const validMonth = this.formGroup.get(this.month).valid;
+      const validYear = this.formGroup.get(this.year).valid;
+
+      if (!validDay || !validMonth || !validYear) {
+        return { dateComponent: true };
+      }
       // + to coerce year to a number
       return !this.isValidDate(new Date(year, month, day), month, +year) ? { dateComponent: true } : null;
     };

projects/exui-common-lib/yarn.lock

@@ -1,40 +1,68 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
 
+__metadata:
+  version: 6
+  cacheKey: 8
 
-balanced-match@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
-  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+"@hmcts/rpx-xui-common-lib@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@hmcts/rpx-xui-common-lib@workspace:."
+  dependencies:
+    ngx-spec: ^2.1.4
+    tslib: ^2.0.0
+  peerDependencies:
+    launchdarkly-js-client-sdk: ^3.3.0
+    ngx-pagination: ^3.2.1
+    rpx-xui-translation: ^0.1.1
+  languageName: unknown
+  linkType: soft
+
+"balanced-match@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "balanced-match@npm:1.0.2"
+  checksum: 9706c088a283058a8a99e0bf91b0a2f75497f185980d9ffa8b304de1d9e58ebda7c72c07ebf01dadedaac5b2907b2c6f566f660d62bd336c3468e960403b9d65
+  languageName: node
+  linkType: hard
 
-brace-expansion@^1.1.7:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
-  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+"brace-expansion@npm:^1.1.7":
+  version: 1.1.11
+  resolution: "brace-expansion@npm:1.1.11"
   dependencies:
-    balanced-match "^1.0.0"
-    concat-map "0.0.1"
-
-[email protected]:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
-
-minimatch@^3.0.4:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
-  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+    balanced-match: ^1.0.0
+    concat-map: 0.0.1
+  checksum: faf34a7bb0c3fcf4b59c7808bc5d2a96a40988addf2e7e09dfbb67a2251800e0d14cd2bfc1aa79174f2f5095c54ff27f46fb1289fe2d77dac755b5eb3434cc07
+  languageName: node
+  linkType: hard
+
+"concat-map@npm:0.0.1":
+  version: 0.0.1
+  resolution: "concat-map@npm:0.0.1"
+  checksum: 902a9f5d8967a3e2faf138d5cb784b9979bad2e6db5357c5b21c568df4ebe62bcb15108af1b2253744844eb964fc023fbd9afbbbb6ddd0bcc204c6fb5b7bf3af
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^3.0.4":
+  version: 3.1.2
+  resolution: "minimatch@npm:3.1.2"
   dependencies:
-    brace-expansion "^1.1.7"
+    brace-expansion: ^1.1.7
+  checksum: c154e566406683e7bcb746e000b84d74465b3a832c45d59912b9b55cd50dee66e5c4b1e5566dba26154040e51672f9aa450a9aef0c97cfc7336b78b7afb9540a
+  languageName: node
+  linkType: hard
 
-ngx-spec@^2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/ngx-spec/-/ngx-spec-2.1.5.tgz#46c4a2eac68fe7bee4d5277987a7fcd44446873a"
-  integrity sha512-xgrjzAVnbl2a+pQAgsDlcJPKNIhEZnKTmytp/1hAHHl6I/fbXQ5LmAcJy+D/hwLWUjoSSoLLSHLFAvEsrIngTw==
+"ngx-spec@npm:^2.1.4":
+  version: 2.1.5
+  resolution: "ngx-spec@npm:2.1.5"
   dependencies:
-    minimatch "^3.0.4"
+    minimatch: ^3.0.4
+  checksum: 41c4d13157e1288ddc1f57387c611766096702c84e65c440fab0762dda9aeaf1620a440de05512859cd6653261f0fe9d43b120d43731334e918e52d331a37dee
+  languageName: node
+  linkType: hard
 
-tslib@^2.0.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
-  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+"tslib@npm:^2.0.0":
+  version: 2.5.0
+  resolution: "tslib@npm:2.5.0"
+  checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1
+  languageName: node
+  linkType: hard