Angular Forms Course

Author: jhades

src/app/create-course/create-course-step-one/create-course-step-one.component.html

@@ -4,12 +4,14 @@
 
     <input matInput
            placeholder="Course title"
-           formControlName="title" #titleHint>
+           formControlName="title" #title>
 
     <mat-hint align="end">
-      {{titleHint.value.length}} / 60
+      {{title.value.length}} / 60
     </mat-hint>
 
+    <mat-error *ngIf="form.controls['title']?.errors?.titleExists">This title is already being used.</mat-error>
+
   </mat-form-field>
 
   <mat-form-field>
@@ -75,10 +77,10 @@
 
   </mat-form-field>
 
-  <!--div class="form-val">
+  <div class="form-val">
 
-    {{form.errors | json}}
+    {{form.controls['title'].errors | json}}
 
-  </div-->
+  </div>
 
 </div>

src/app/create-course/create-course-step-one/create-course-step-one.component.ts

@@ -4,6 +4,7 @@ import {createPasswordStrengthValidator} from '../../validators/password-strengt
 import {createPromoRangeValidator} from '../../validators/date-range.validator';
 import {CoursesService} from '../../services/courses.service';
 import {Observable} from 'rxjs';
+import {courseTitleValidator} from '../../validators/course-title.validator';
 
 @Component({
   selector: 'create-course-step-one',
@@ -19,7 +20,13 @@ export class CreateCourseStepOneComponent implements OnInit {
 
   constructor(private fb: FormBuilder, private courses: CoursesService) {
     this.form = fb.group({
-      title: ["", [Validators.required, Validators.minLength(3), Validators.maxLength(60)]],
+      title: [
+        "", {
+          validators: [Validators.required, Validators.minLength(3), Validators.maxLength(60)],
+          asyncValidators: [courseTitleValidator(this.courses)],
+          updateOn: "blur"
+        }
+      ],
       adminPassword: ["", [Validators.required, Validators.minLength(8), createPasswordStrengthValidator()]],
       supportEmail: ["", [Validators.required, Validators.email]],
       category: ["BEGINNER", Validators.required],

src/app/validators/course-title.validator.ts

@@ -0,0 +1,18 @@
+import {CoursesService} from '../services/courses.service';
+import {AbstractControl, AsyncValidatorFn} from '@angular/forms';
+import {map} from 'rxjs/operators';
+
+
+export function courseTitleValidator(courses: CoursesService): AsyncValidatorFn {
+  return (control: AbstractControl) => {
+    return courses.findAllCourses()
+      .pipe(
+        map(courses => {
+
+          const course = courses.find(course => course.description.toLowerCase() == control.value.toLowerCase());
+
+          return course ? {titleExists:true} : null;
+        })
+      )
+  };
+}