Angular Forms Course

Author: jhades

src/app/address-form/address-form.component.html

@@ -34,4 +34,16 @@
 
   </mat-form-field>
 
+  <div class="form-val">
+
+    {{form.value | json}}
+
+  </div>
+
+  <div class="form-val">
+
+    {{form.valid | json}}
+
+  </div>
+
 </fieldset>

src/app/address-form/address-form.component.scss

@@ -0,0 +1,4 @@
+
+.address-error {
+  color:red;
+}

src/app/address-form/address-form.component.ts

@@ -1,5 +1,13 @@
-import {Component, forwardRef, Input, OnDestroy, OnInit} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  FormBuilder, FormGroup,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validator,
+  Validators
+} from '@angular/forms';
 import {noop, Subscription} from 'rxjs';
 
 @Component({
@@ -10,30 +18,36 @@ import {noop, Subscription} from 'rxjs';
     {
       provide: NG_VALUE_ACCESSOR,
       multi: true,
-      useExisting: forwardRef(() => AddressFormComponent)
-    }
+      useExisting: AddressFormComponent
+    },
+    {
+      provide: NG_VALIDATORS,
+      multi: true,
+      useExisting: AddressFormComponent
+    },
   ]
 })
-export class AddressFormComponent implements ControlValueAccessor, OnDestroy {
+export class AddressFormComponent implements ControlValueAccessor, OnDestroy, Validator {
 
   @Input()
   legend:string;
 
-  form: FormGroup;
+  form: FormGroup = this.fb.group({
+    addressLine1: [null, [Validators.required]],
+    addressLine2: [null, [Validators.required]],
+    zipCode: [null, [Validators.required]],
+    city: [null, [Validators.required]]
+  });
 
-  onTouched: Function = noop;
+  onTouched: Function = () => {};
+  onValidationChange: Function = () => {};
 
   onChangeSubs: Subscription[] = [];
 
   constructor(private fb: FormBuilder) {
-    this.form = this.fb.group({
-      addressLine1: ["", Validators.required],
-      addressLine2: ["", Validators.required],
-      zipCode: ["", Validators.required],
-      city: ["", Validators.required]
-    });
   }
 
+
   ngOnDestroy() {
     for (let sub of this.onChangeSubs) {
       sub.unsubscribe();
@@ -64,4 +78,43 @@ export class AddressFormComponent implements ControlValueAccessor, OnDestroy {
     }
   }
 
+  registerOnValidatorChange(fn: () => void) {
+    this.onValidationChange = fn;
+  }
+
+  validate(control: AbstractControl) {
+
+    if (this.form.valid) {
+      return null;
+    }
+
+    let errors : any = {};
+
+    errors = this.addControlErrors(errors, "addressLine1");
+    errors = this.addControlErrors(errors, "addressLine2");
+    errors = this.addControlErrors(errors, "zipCode");
+    errors = this.addControlErrors(errors, "city");
+
+    console.log("errors", errors);
+
+    return errors;
+  }
+
+  addControlErrors(allErrors: any, controlName:string) {
+
+    const errors = {...allErrors};
+
+    const controlErrors = this.form.controls[controlName].errors;
+
+    if (controlErrors) {
+      errors[controlName] = controlErrors;
+    }
+
+    return errors;
+
+  }
+
 }
+
+
+

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

@@ -78,9 +78,9 @@
 
   </mat-form-field>
 
-  <!--address-form formControlName="addressOne" legend="Address 1"></address-form>
+  <address-form formControlName="address" legend="Address"></address-form>
 
-  <address-form formControlName="addressTwo" legend="Address 2"></address-form-->
+  <!--address-form formControlName="addressTwo" legend="Address 2"></address-form-->
 
 </div>
 
@@ -89,3 +89,9 @@
   {{form.value | json}}
 
 </div>
+
+<div class="form-val">
+
+  {{form.errors | json}}
+
+</div>

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

@@ -33,8 +33,7 @@ export class CreateCourseStepOneComponent implements OnInit {
       downloadsAllowed: [false, Validators.requiredTrue],
       releasedAt: [new Date(), Validators.required],
       longDescription: ["",[Validators.required, Validators.minLength(3)]],
-      addressOne: [null],
-      addressTwo: [null]
+      address: [null]
     });
   }
 

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

@@ -13,7 +13,7 @@ <h2 class="title">Create New Course</h2>
         <create-course-step-one #stepOne></create-course-step-one>
 
         <div class="stepper-buttons">
-          <button mat-raised-button color="primary" matStepperNext>Continue to Step 2</button>
+          <button mat-raised-button color="primary" matStepperNext [disabled]="!stepOne.form.valid">Continue to Step 2</button>
         </div>
 
     </mat-step>
@@ -26,7 +26,7 @@ <h2 class="title">Create New Course</h2>
 
       <div class="stepper-buttons">
         <button mat-raised-button  matStepperPrevious>Back</button>
-        <button mat-raised-button color="primary" matStepperNext>Continue to Step 3</button>
+        <button mat-raised-button color="primary" matStepperNext [disabled]="!stepTwo.form.valid">Continue to Step 3</button>
       </div>
 
     </mat-step>