Angular Forms In Depth

Author: Your Name

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

@@ -6,31 +6,31 @@
 
         <input matInput
                placeholder="Address Line 1"
-               formControlName="addressLine1">
+               formControlName="addressLine1" (blur)="onTouched()">
 
     </mat-form-field>
 
     <mat-form-field>
 
         <input matInput
                placeholder="Address Line 2"
-               formControlName="addressLine2">
+               formControlName="addressLine2" (blur)="onTouched()">
 
     </mat-form-field>
 
     <mat-form-field>
 
         <input matInput
                placeholder="Zip Code"
-               formControlName="zipCode">
+               formControlName="zipCode" (blur)="onTouched()">
 
     </mat-form-field>
 
     <mat-form-field>
 
         <input matInput
                placeholder="City"
-               formControlName="city">
+               formControlName="city" (blur)="onTouched()">
 
     </mat-form-field>
 

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

@@ -13,13 +13,24 @@ import {noop, Subscription} from 'rxjs';
 @Component({
   selector: 'address-form',
   templateUrl: './address-form.component.html',
-  styleUrls: ['./address-form.component.scss']
+  styleUrls: ['./address-form.component.scss'],
+  providers: [
+      {
+          provide: NG_VALUE_ACCESSOR,
+          multi:true,
+          useExisting: AddressFormComponent
+      }
+  ]
 })
-export class AddressFormComponent {
+export class AddressFormComponent implements ControlValueAccessor, OnDestroy {
 
     @Input()
     legend:string;
 
+    onTouched = () => {};
+
+    onChangeSub: Subscription;
+
     form: FormGroup = this.fb.group({
         addressLine1: [null, [Validators.required]],
         addressLine2: [null, [Validators.required]],
@@ -28,9 +39,51 @@ export class AddressFormComponent {
     });
 
     constructor(private fb: FormBuilder) {
+
+    }
+
+    registerOnChange(onChange: any) {
+        this.onChangeSub = this.form.valueChanges.subscribe(onChange);
+    }
+
+    ngOnDestroy() {
+        this.onChangeSub.unsubscribe();
+    }
+
+
+    writeValue(value: any) {
+        if (value) {
+            this.form.setValue(value);
+        }
+    }
+
+    registerOnTouched(onTouched: any) {
+        this.onTouched = onTouched;
+    }
+
+    setDisabledState(disabled:boolean) {
+        if (disabled) {
+            this.form.disable();
+        }
+        else {
+            this.form.enable();
+        }
+
     }
 
 }
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -1,7 +1,7 @@
 
 <div [formGroup]="form">
 
-    <address-form legend="Address"></address-form>
+    <address-form legend="Address" formControlName="address"></address-form>
 
     <mat-form-field>
 

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

@@ -30,7 +30,8 @@ export class CreateCourseStep1Component implements OnInit {
       releasedAt: [new Date(), Validators.required],
       category: ['BEGINNER', Validators.required],
       downloadsAllowed: [false, Validators.requiredTrue],
-      longDescription: ['', [Validators.required, Validators.minLength(3)]]
+      longDescription: ['', [Validators.required, Validators.minLength(3)]],
+      address: [null, Validators.required]
   });
 
   courseCategories$ : Observable<CourseCategory[]>;