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..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 @@ -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(); @@ -123,16 +133,22 @@ 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) { @@ -140,4 +156,17 @@ export abstract class CustomFormControlDirective this.stateChanges.next(); } } + + private checkUpdateRequired(control: AbstractControl | null) { + if (!control) { + return; + } + + if ( + this.required !== + coerceBooleanProperty(control.hasValidator(Validators.required)) + ) { + this.required = control.hasValidator(Validators.required); + } + } }