diff --git a/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.html b/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.html index a10d8fbdd..761a24e57 100644 --- a/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.html +++ b/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.html @@ -13,17 +13,27 @@ id="eco-capture-reason-text" formControlName="ecoCaptureReason" class="mes-data input-styling-background" + [charLimit]="characterLimit" + charCount + [class.ng-invalid]="invalid" [value]="ecoCaptureReason" - [maxLength]="1000" + (onCharacterCountChanged)="characterCountChanged($event)" (change)="ecoCaptureReasonChanged($event.target.value)" emojiBlock pasteSanitiser > +
+ {{ getCharacterCountText() }} +
-
+
Please provide a reason for ECO capture
diff --git a/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.ts b/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.ts index 5b7172dd6..d864c7d5e 100644 --- a/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.ts +++ b/src/app/pages/office/cat-adi-part2/components/eco-capture-reason/eco-capture-reason.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; -import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { CharacterCountService } from '@providers/character-count/character-count.service'; @Component({ selector: 'eco-capture-reason', @@ -7,7 +8,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms'; }) export class EcoCaptureReasonComponent implements OnChanges { @Input() - formGroup: FormGroup; + formGroup: UntypedFormGroup; @Input() ecoCaptureReason: string; @@ -18,20 +19,34 @@ export class EcoCaptureReasonComponent implements OnChanges { @Output() ecoCaptureReasonChange = new EventEmitter(); - private formControl: FormControl; + formControl: UntypedFormControl; + charsRemaining: number = null; + characterLimit = 1000; + static readonly controlName: string = 'ecoCaptureReason'; + + constructor(public characterCountService: CharacterCountService) {} ngOnChanges(): void { if (!this.formControl) { - this.formControl = new FormControl(null); - this.formGroup.addControl('ecoCaptureReason', this.formControl); + this.formControl = new UntypedFormControl(null); + this.formGroup.addControl(EcoCaptureReasonComponent.controlName, this.formControl); } - this.formControl.setValidators( - this.fuelEfficientDriving ? Validators.compose([Validators.required, Validators.maxLength(1000)]) : null - ); - this.formControl.updateValueAndValidity({ onlySelf: true, emitEvent: false }); + if (this.fuelEfficientDriving) { + this.formGroup + .get(EcoCaptureReasonComponent.controlName) + .setValidators([Validators.required, this.charactersExceededValidator()]); + } else { + this.formGroup.get(EcoCaptureReasonComponent.controlName).setValidators([this.charactersExceededValidator()]); + } - this.formControl.patchValue(this.ecoCaptureReason, { onlySelf: true, emitEvent: false }); + this.formControl.patchValue(this.ecoCaptureReason); + } + + charactersExceededValidator(): ValidatorFn { + return (): ValidationErrors | null => { + return this.characterCountService.charactersExceeded(this.charsRemaining) ? { charactersExceeded: true } : null; + }; } ecoCaptureReasonChanged(ecoCaptureReason: string): void { @@ -43,4 +58,23 @@ export class EcoCaptureReasonComponent implements OnChanges { get invalid(): boolean { return !this.formControl.valid && this.formControl.dirty; } + + characterCountChanged(charactersRemaining: number) { + this.charsRemaining = charactersRemaining; + this.formControl.updateValueAndValidity(); + } + + /** + * Request appropriate character count text based upon how many characters are remaining + */ + getCharacterCountText(): string { + return this.characterCountService.getCharacterCountText(this.charsRemaining); + } + + /** + * Request whether the character count has been exceeded + */ + charactersExceeded(): boolean { + return this.characterCountService.charactersExceeded(this.charsRemaining); + } } diff --git a/src/app/pages/pass-finalisation/cat-adi-part3/components/reason-given/reason-given.component.html b/src/app/pages/pass-finalisation/cat-adi-part3/components/reason-given/reason-given.component.html index 1e4ceb9c0..e4653e2d4 100644 --- a/src/app/pages/pass-finalisation/cat-adi-part3/components/reason-given/reason-given.component.html +++ b/src/app/pages/pass-finalisation/cat-adi-part3/components/reason-given/reason-given.component.html @@ -7,20 +7,22 @@ -
{{ getCharacterCountText() }}
+
+ {{ getCharacterCountText() }} +
diff --git a/src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.html b/src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.html index 1fb5fa930..c374fc4e4 100644 --- a/src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.html +++ b/src/app/pages/test-report/cat-adi-part3/components/lesson-theme/lesson-theme.html @@ -150,15 +150,15 @@

Lesson theme: