Merge pull request #176 from gctools-outilsgc/editor-update

Editor validation
gctools-outilsgc · Nov 7, 2023 · 94b8d90 · 94b8d90
2 parents d5bf990 + d86a27f
commit 94b8d90
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 46 deletions.
diff --git a/src/app/features/events/components/event/event.component.html b/src/app/features/events/components/event/event.component.html
@@ -55,6 +55,7 @@ <h1 *ngIf="!loading">
                             class="registerBtn"
                             [disabled]="loading || isPast()"
                             [ngClass]="loading || isPast() ? 'disabled' : 'enabled'"
+                            theme="secondary-2"
                             (click)="scrollToRegister()">
                     {{ translations.event.form.register | translate }}
                 </app-button>

diff --git a/src/app/shared/components/blog-form/blog-form.component.ts b/src/app/shared/components/blog-form/blog-form.component.ts
@@ -3,6 +3,7 @@ import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '
 import { ErrorStateMatcher } from '@angular/material/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Translations } from 'src/app/core/services/translations.service';
+import { Validators as EditorValidators } from 'ngx-editor';
 
 @Component({
   selector: 'app-blog-form',
@@ -31,7 +32,10 @@ export class BlogFormComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     for (const [key, value] of Object.entries(this.model)) {
       if (!this.form.controls[key]) {
-        this.form.addControl(key, new FormControl(value, [Validators.required]));
+        if (key == 'description')
+          this.form.addControl(key, new FormControl(value, [EditorValidators.required(), EditorValidators.maxLength(this.maxBlogLength)]));
+        else
+          this.form.addControl(key, new FormControl(value, [Validators.required]));
       } else {
         this.form.controls[key].setValue(value);
         console.warn('Duplicate FormControl detected.');

diff --git a/src/app/shared/components/editor/editor.component.html b/src/app/shared/components/editor/editor.component.html
@@ -12,7 +12,7 @@
 </mat-label>
 
 <div #gccEditor class="NgxEditor__Wrapper"
-     [ngClass]="{focus: hasFocus, error: control && control.hasError('required') || (characterCount > maxCharacters) || (characterCount < minCharacters)}">
+     [ngClass]="{focus: hasFocus, error: control && control.touched && !control.valid}">
     <ngx-editor-menu 
         [editor]="editor" 
         [toolbar]="toolbar"
@@ -29,7 +29,7 @@
         [required]="required">
     </ngx-editor>
     <div *ngIf="minCharacters > 0 || maxCharacters != Number.MAX_VALUE" 
-         [ngClass]="(characterCount > maxCharacters) || (characterCount < minCharacters) ? 'error' : ''" 
+         [ngClass]="(control && control.touched) && ((characterCount > maxCharacters) || (characterCount < minCharacters)) ? 'error' : ''" 
          class="character-count">
         {{ characterCount }} / {{ maxCharacters }}
     </div>
@@ -47,7 +47,7 @@
     {{ translations.input.error.maxLength | translate }} {{ control.errors!['maxlength'].requiredLength }}.
 </mat-error>
 
-<mat-error *ngIf="control && control.hasError('required')">
+<mat-error *ngIf="control && control.touched && control.hasError('required')">
     {{ label }} {{ translations.input.error.required | translate }}
 </mat-error>
 

diff --git a/src/app/shared/components/editor/editor.component.ts b/src/app/shared/components/editor/editor.component.ts
@@ -4,7 +4,7 @@ import { Editor, NgxEditorService, Toolbar } from 'ngx-editor';
 import { ngxEditorLocals } from '../../factories/editor-config.factory';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { Translations } from 'src/app/core/services/translations.service';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TooltipDirection } from '../../models/tooltip-direction';
 
 // https://sibiraj-s.github.io/ngx-editor/en/introduction/
@@ -27,10 +27,10 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
   @Input() label!: string;
   @Input() hint!: string;
   @Input() autofocus: boolean = false;
-  @Input() minCharacters: number = 0;
-  @Input() maxCharacters: number = Number.MAX_VALUE;
   @Input() control!: FormControl;
   @Input() controlName!: string;
+  @Input() minCharacters: number = 0;
+  @Input() maxCharacters: number = Number.MAX_VALUE;
 
   @Output() htmlChange = new EventEmitter<string>();
 
@@ -92,14 +92,9 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
     }
   }
 
-  // TODO: Handle min/max
   ngAfterContentInit(): void {
-    if (this.control && this.control.hasValidator(Validators.required)) {
-      this.control.removeValidators([Validators.required]);
-      this.control.clearValidators();
-      this.control.updateValueAndValidity();
-      this.hasRequiredValidator = true;
-    }
+    if (this.control && this.html != '')
+      this.updateCharacterCount(this.html);
   }
 
   ngAfterViewInit() {
@@ -111,12 +106,8 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
         if (classList) {
           this.hasFocus = Array.from(classList).includes('ProseMirror-focused') ? true : false;
 
-          // TODO
-          if (!this.hasFocus && this.control && !this.control.hasValidator(Validators.required) && this.hasRequiredValidator) {
-            this.control.addValidators([Validators.required]);
-            this.control.updateValueAndValidity();
-            this.updateCharacterCount(this.html);
-          }
+          if (this.control && !this.hasFocus)
+            this.control.markAsTouched();
         }
       });
     });
@@ -151,22 +142,8 @@ export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, AfterC
       this.onInputChange(this.html);
     }
 
-    if (this.control) {
-      if (this.characterCount > this.maxCharacters){
-        this.control.setErrors({
-          maxlength: {
-            requiredLength: this.maxCharacters
-          }
-        });
-      } else if (this.characterCount < this.minCharacters) {
-        this.control.setErrors({
-          minlength: {
-            requiredLength: this.minCharacters
-          }
-        });
-      }
+    if (this.control)
       this.control.markAsTouched();
-    }
   }
 
   onLangChange(): void {

diff --git a/src/app/shared/components/event-form/event-form.component.html b/src/app/shared/components/event-form/event-form.component.html
@@ -71,7 +71,7 @@
                 [hint]="translations.forms.event.body_hint | translate"
                 [(html)]="model.eventDescription"
                 [required]="true"
-                [maxCharacters]="240"
+                [maxCharacters]="maxCharacters"
                 formControlName="eventDescription"
                 [control]="$any(form).controls['eventDescription']"
                 [disabled]="disabled">

diff --git a/src/app/shared/components/event-form/event-form.component.ts b/src/app/shared/components/event-form/event-form.component.ts
@@ -3,6 +3,7 @@ import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '
 import { ErrorStateMatcher } from '@angular/material/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Translations } from 'src/app/core/services/translations.service';
+import { Validators as EditorValidators } from 'ngx-editor';
 
 @Component({
   selector: 'app-event-form',
@@ -31,6 +32,7 @@ export class EventFormComponent implements OnInit, OnDestroy {
   eventLanguage = EventLanguage;
   eventDuration = EventDuration;
   errorStateMatcher = new MyErrorStateMatcher();
+  maxCharacters = 240;
 
   constructor(public translations: Translations) {
 
@@ -39,7 +41,10 @@ export class EventFormComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     for (const [key, value] of Object.entries(this.model)) {
       if (!this.form.controls[key]) {
-        this.form.addControl(key, new FormControl(value, [Validators.required]));
+        if (key == 'eventDescription')
+          this.form.addControl(key, new FormControl(value, [EditorValidators.required(), EditorValidators.maxLength(this.maxCharacters)]));
+        else
+          this.form.addControl(key, new FormControl(value, [Validators.required]));
       } else {
         this.form.controls[key].setValue(value);
         console.warn('Duplicate FormControl detected.');

diff --git a/src/app/shared/components/poll-form/poll-form.component.ts b/src/app/shared/components/poll-form/poll-form.component.ts
@@ -4,6 +4,7 @@ import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '
 import { ErrorStateMatcher } from '@angular/material/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Translations } from 'src/app/core/services/translations.service';
+import { Validators as EditorValidators } from 'ngx-editor';
 
 @Component({
   selector: 'app-poll-form',
@@ -38,9 +39,8 @@ export class PollFormComponent implements OnInit, OnDestroy {
       new FormControl(
         this.model.description,
         [
-          Validators.required,
-          //Validators.minLength(this.minLength), 
-          Validators.maxLength(this.maxLength),
+          EditorValidators.required(),
+          EditorValidators.maxLength(this.maxLength),
         ]
       )
     );

diff --git a/src/app/shared/components/post-form/post-form.component.html b/src/app/shared/components/post-form/post-form.component.html
@@ -2,11 +2,11 @@
     <app-editor [label]="translations.forms.post.post | translate"
                 [hint]="translations.forms.placeholder | translate"
                 [(html)]="model.description"
-                [required]="true"
-                [autofocus]="true"
-                [maxCharacters]="maxLength"
                 formControlName="description"
                 [control]="$any(form).controls['description']"
-                [disabled]="disabled">
+                [minCharacters]="minLength"
+                [maxCharacters]="maxLength"
+                [disabled]="disabled"
+                [required]="true">
     </app-editor>
 </form>
diff --git a/src/app/shared/components/post-form/post-form.component.ts b/src/app/shared/components/post-form/post-form.component.ts
@@ -1,7 +1,8 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Translations } from 'src/app/core/services/translations.service';
+import { Validators } from 'ngx-editor';
 
 @Component({
   selector: 'app-post-form',
@@ -28,7 +29,7 @@ export class PostFormComponent implements OnInit, OnDestroy {
       new FormControl(
         this.model.description,
         [
-          Validators.required,
+          Validators.required(),
           Validators.minLength(this.minLength), 
           Validators.maxLength(this.maxLength),
         ]