Form Control

//parent component where form is initialized
export class SpanFormComponent implements OnInit {
  public mainForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.mainForm = this.fb.group({
      user_name: ['', Validators.required],
      first_name: ['',Validators.required],
      last_name: ['',Validators.required],
      email: ['',Validators.required],
      address: this.fb.group({
        street: ['',Validators.required],
        city: ['',Validators.required],
        state: ['',Validators.required],
        zip: ['',Validators.required]
      }),
      favorite_color: ['',Validators.required],
      favorite_food: ['',Validators.required],
      favorite_season: ['',Validators.required],
      favorite_episode: ['',Validators.required]
    })
  }
}

<button routerLink="step-1">Step 1</button>
<button routerLink="step-2">Step 2</button>
<button routerLink="step-3">Step 3</button>
<form [formGroup]="mainForm" class="form-ui">
      <router-outlet></router-outlet>
</form>

export class Step1Component implements OnInit {
  public parentForm;
  constructor(@Optional() private controlContainer: ControlContainer) {}

  ngOnInit() {
    this.parentForm = this.controlContainer.control;
  }
}

<h3>Step One of Our Sign-in Process</h3>
<form [formGroup]="parentForm">
      <div class="form-group">
        <label for="name">Choose a User Name</label>
        <input name="user_name" formControlName="user_name" />
      </div>
</form>
<button [disabled]="!parentForm.controls.user_name.valid"
    routerLink="/signup/step-2">Next</button>