Angular Forms Course

Author: jhades

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

@@ -0,0 +1,37 @@
+<fieldset [formGroup]="form">
+
+  <legend>{{legend}}</legend>
+
+  <mat-form-field>
+
+    <input matInput
+           placeholder="Address Line 1"
+           formControlName="addressLine1" (blur)="onTouched()">
+
+  </mat-form-field>
+
+  <mat-form-field>
+
+    <input matInput
+           placeholder="Address Line 2"
+           formControlName="addressLine2" (blur)="onTouched()">
+
+  </mat-form-field>
+
+  <mat-form-field>
+
+    <input matInput
+           placeholder="Zip Code"
+           formControlName="zipCode" (blur)="onTouched()">
+
+  </mat-form-field>
+
+  <mat-form-field>
+
+    <input matInput
+           placeholder="City"
+           formControlName="city" (blur)="onTouched()">
+
+  </mat-form-field>
+
+</fieldset>

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

@@ -0,0 +1,67 @@
+import {Component, forwardRef, Input, OnDestroy, OnInit} from '@angular/core';
+import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
+import {noop, Subscription} from 'rxjs';
+
+@Component({
+  selector: 'address-form',
+  templateUrl: './address-form.component.html',
+  styleUrls: ['./address-form.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: forwardRef(() => AddressFormComponent)
+    }
+  ]
+})
+export class AddressFormComponent implements ControlValueAccessor, OnDestroy {
+
+  @Input()
+  legend:string;
+
+  form: FormGroup;
+
+  onTouched: Function = noop;
+
+  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();
+    }
+  }
+
+  registerOnChange(onChange: any) {
+    const sub = this.form.valueChanges.subscribe(onChange);
+    this.onChangeSubs.push(sub);
+  }
+
+  registerOnTouched(onTouched: Function) {
+    this.onTouched = onTouched;
+  }
+
+  setDisabledState(disabled: boolean) {
+    if (disabled) {
+      this.form.disable();
+    }
+    else {
+      this.form.enable();
+    }
+  }
+
+  writeValue(value: any) {
+    if (value) {
+      this.form.setValue(value, {emitEvent: false});
+    }
+  }
+
+}

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

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {forwardRef, NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -28,7 +28,7 @@ import {CoursesService} from "./services/courses.service";
 import {HttpClientModule} from "@angular/common/http";
 import {CourseResolver} from "./services/course.resolver";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule} from '@angular/forms';
 import {MatMomentDateModule} from "@angular/material-moment-adapter";
 import {LoginComponent} from './login/login.component';
 import { CreateCourseComponent } from './create-course/create-course.component';
@@ -40,6 +40,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {CreateCourseStepOneComponent} from './create-course/create-course-step-one/create-course-step-one.component';
 import {CreateCourseStepTwoComponent} from './create-course/create-course-step-two/create-course-step-two.component';
 import {MatStepperModule} from '@angular/material/stepper';
+import { AddressFormComponent } from './address-form/address-form.component';
 
 @NgModule({
     declarations: [
@@ -54,7 +55,8 @@ import {MatStepperModule} from '@angular/material/stepper';
         PasswordStrengthDirective,
         OnlyOneErrorPipe,
         CreateCourseStepOneComponent,
-        CreateCourseStepTwoComponent
+        CreateCourseStepTwoComponent,
+        AddressFormComponent
     ],
     imports: [
         BrowserModule,

src/app/app.module.ts

@@ -1,3 +1,10 @@
+
+<div class="form-val">
+
+  {{form.value | json}}
+
+</div>
+
 <div [formGroup]="form">
 
   <mat-form-field>
@@ -77,10 +84,8 @@
 
   </mat-form-field>
 
-  <div class="form-val">
-
-    {{form.controls['title'].errors | json}}
+  <address-form formControlName="addressOne" legend="Address 1"></address-form>
 
-  </div>
+  <address-form formControlName="addressTwo" legend="Address 2"></address-form>
 
 </div>

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

@@ -32,7 +32,9 @@ export class CreateCourseStepOneComponent implements OnInit {
       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)]],
+      addressOne: [null],
+      addressTwo: [null]
     });
   }