Angular Forms Course

Author: jhades

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

@@ -1,10 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {createPasswordStrengthValidator} from '../../validators/password-strength.validator';
 import {createPromoRangeValidator} from '../../validators/date-range.validator';
 import {CoursesService} from '../../services/courses.service';
 import {Observable} from 'rxjs';
 import {courseTitleValidator} from '../../validators/course-title.validator';
+import {filter} from 'rxjs/operators';
 
 @Component({
   selector: 'create-course-step-1',
@@ -21,18 +22,18 @@ export class CreateCourseStep1Component implements OnInit {
   constructor(private fb: FormBuilder, private courses: CoursesService) {
     this.form = fb.group({
       title: [
-        "", {
+        '', {
           validators: [Validators.required, Validators.minLength(3), Validators.maxLength(60)],
           asyncValidators: [courseTitleValidator(this.courses)],
-          updateOn: "blur"
+          updateOn: 'blur'
         }
       ],
-      adminPassword: ["", [Validators.required, Validators.minLength(8), createPasswordStrengthValidator()]],
-      supportEmail: ["", [Validators.required, Validators.email]],
-      category: ["BEGINNER", Validators.required],
+      adminPassword: ['', [Validators.required, Validators.minLength(8), createPasswordStrengthValidator()]],
+      supportEmail: ['', [Validators.required, Validators.email]],
+      category: ['BEGINNER', Validators.required],
       downloadsAllowed: [false, Validators.requiredTrue],
       releasedAt: [new Date(), Validators.required],
-      longDescription: ["",[Validators.required, Validators.minLength(3)]],
+      longDescription: ['', [Validators.required, Validators.minLength(3)]],
       address: [null]
     });
   }
@@ -41,6 +42,24 @@ export class CreateCourseStep1Component implements OnInit {
 
     this.courseCategories$ = this.courses.findCourseCategories();
 
+    const draftValue = localStorage.getItem("STEP_1");
+
+    if (draftValue) {
+      this.form.setValue(JSON.parse(draftValue));
+    }
+
+    this.form.valueChanges
+      .pipe(
+        filter(val => this.form.valid)
+      )
+      .subscribe(
+        val => {
+
+          localStorage.setItem("STEP_1", JSON.stringify(val));
+
+        }
+      );
+
   }
 
 }