controlvalueaccessor

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

@@ -0,0 +1,49 @@
+<fieldset [formGroup]="form">
+
+    <legend>{{legend}}</legend>
+
+    <mat-form-field>
+
+        <input matInput
+               placeholder="Address Line 1"
+               formControlName="addressLine1">
+
+    </mat-form-field>
+
+    <mat-form-field>
+
+        <input matInput
+               placeholder="Address Line 2"
+               formControlName="addressLine2">
+
+    </mat-form-field>
+
+    <mat-form-field>
+
+        <input matInput
+               placeholder="Zip Code"
+               formControlName="zipCode">
+
+    </mat-form-field>
+
+    <mat-form-field>
+
+        <input matInput
+               placeholder="City"
+               formControlName="city">
+
+    </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.ts

@@ -17,6 +17,19 @@ import {noop, Subscription} from 'rxjs';
 })
 export class AddressFormComponent {
 
+    @Input()
+    legend:string;
+
+    form: FormGroup = this.fb.group({
+        addressLine1: [null, [Validators.required]],
+        addressLine2: [null, [Validators.required]],
+        zipCode: [null, [Validators.required]],
+        city: [null, [Validators.required]]
+    });
+
+    constructor(private fb: FormBuilder) {
+    }
+
 }