From 2a1e9b0bd60a484d6e8fb86a2f13be290e32cb87 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 8 Nov 2023 14:30:23 +0100 Subject: [PATCH 1/5] fix(core): support "required" indicator for custom form-controls --- .../custom-form-control.directive.ts | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts index 48263da39b..3edaabf9b8 100644 --- a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts +++ b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts @@ -4,6 +4,7 @@ import { FormGroupDirective, NgControl, NgForm, + Validators, } from "@angular/forms"; import { MatFormFieldControl } from "@angular/material/form-field"; import { @@ -28,7 +29,16 @@ export abstract class CustomFormControlDirective // eslint-disable-next-line @angular-eslint/no-input-rename @Input("aria-describedby") userAriaDescribedBy: string; @Input() placeholder: string; - @Input() required = false; + + @Input() + get required() { + return this._required; + } + set required(req: boolean) { + this._required = coerceBooleanProperty(req); + this.stateChanges.next(); + } + private _required = false; abstract inputElement: { _elementRef: ElementRef }; stateChanges = new Subject(); @@ -139,5 +149,13 @@ export abstract class CustomFormControlDirective this.errorState = newState; this.stateChanges.next(); } + + if (control.hasValidator(Validators.required)) { + this.required = true; + this.stateChanges.next(); + } else if (this.required) { + this.required = false; + this.stateChanges.next(); + } } } From e40cae51b74fccc8ea8e59ae2537011149c75a0c Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Wed, 8 Nov 2023 18:31:46 +0100 Subject: [PATCH 2/5] fix test --- .../custom-form-control.directive.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts index 3edaabf9b8..4d6461e7f5 100644 --- a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts +++ b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts @@ -150,12 +150,14 @@ export abstract class CustomFormControlDirective this.stateChanges.next(); } - if (control.hasValidator(Validators.required)) { - this.required = true; - this.stateChanges.next(); - } else if (this.required) { - this.required = false; - this.stateChanges.next(); + if (control) { + if (control.hasValidator(Validators.required)) { + this.required = true; + this.stateChanges.next(); + } else if (this.required) { + this.required = false; + this.stateChanges.next(); + } } } } From 8aa3d219dd420fd61b08638e35026f93ee685cbd Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 10 Nov 2023 14:12:35 +0100 Subject: [PATCH 3/5] Update src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts Co-authored-by: Simon --- .../basic-autocomplete/custom-form-control.directive.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts index 4d6461e7f5..f538cf9c65 100644 --- a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts +++ b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts @@ -151,12 +151,8 @@ export abstract class CustomFormControlDirective } if (control) { - if (control.hasValidator(Validators.required)) { - this.required = true; - this.stateChanges.next(); - } else if (this.required) { - this.required = false; - this.stateChanges.next(); + if (this.required !== coerceBooleanProperty(control.hasValidator(Validators.required))) { + this.required = control.hasValidator(Validators.required); } } } From d189c569334e286bfac5285a34717eedaccdd427 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Fri, 10 Nov 2023 14:21:49 +0100 Subject: [PATCH 4/5] fix lint --- .../basic-autocomplete/custom-form-control.directive.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts index f538cf9c65..ec561cd54e 100644 --- a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts +++ b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts @@ -151,7 +151,10 @@ export abstract class CustomFormControlDirective } if (control) { - if (this.required !== coerceBooleanProperty(control.hasValidator(Validators.required))) { + if ( + this.required !== + coerceBooleanProperty(control.hasValidator(Validators.required)) + ) { this.required = control.hasValidator(Validators.required); } } From 20db1ebf309c82e9f780a5d8d6269e579c8b8de4 Mon Sep 17 00:00:00 2001 From: Sebastian Leidig Date: Fri, 10 Nov 2023 14:26:06 +0100 Subject: [PATCH 5/5] simplify code --- .../custom-form-control.directive.ts | 32 ++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts index ec561cd54e..00fc6d0a23 100644 --- a/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts +++ b/src/app/core/common-components/basic-autocomplete/custom-form-control.directive.ts @@ -133,30 +133,40 @@ export abstract class CustomFormControlDirective this.disabled = isDisabled; } + ngDoCheck() { + const control = this.ngControl + ? (this.ngControl.control as AbstractControl) + : null; + + this.checkUpdateErrorState(control); + this.checkUpdateRequired(control); + } + /** * Updates the error state based on the form control * Taken from {@link https://github.com/angular/components/blob/a1d5614f18066c0c2dc2580c7b5099e8f68a8e74/src/material/core/common-behaviors/error-state.ts#L59} */ - ngDoCheck() { + private checkUpdateErrorState(control: AbstractControl | null) { const oldState = this.errorState; const parent = this.parentFormGroup || this.parentForm; - const control = this.ngControl - ? (this.ngControl.control as AbstractControl) - : null; const newState = this.errorStateMatcher.isErrorState(control, parent); if (newState !== oldState) { this.errorState = newState; this.stateChanges.next(); } + } + + private checkUpdateRequired(control: AbstractControl | null) { + if (!control) { + return; + } - if (control) { - if ( - this.required !== - coerceBooleanProperty(control.hasValidator(Validators.required)) - ) { - this.required = control.hasValidator(Validators.required); - } + if ( + this.required !== + coerceBooleanProperty(control.hasValidator(Validators.required)) + ) { + this.required = control.hasValidator(Validators.required); } } }