title: Show values of reactive form in other component
body: <p>The situation is that I have several components such as component A in which there is a reactive form. Data from the forms are collected in one service. Now I would like to preview this form in component B, but after changing the path to routerLink=&quot;/componentB&quot; data from the service and component A are no longer available. Below is the code:</p>
  <p>Component A</p>
  <pre><code>  constructor(
      private formBuilder: FormBuilder,
    ) {
  
      this.step = this.formBuilder.group({
        field: [''],
      });
      this.formService.stepReady(this.step, 'one');
    }
  </code></pre>
  <p>Service</p>
  <pre><code>  private stepOneSource: Subject&lt;FormGroup&gt; = new Subject();
    stepOne: Observable&lt;FormGroup&gt; = this.stepOneSource.asObservable();
    
      mainForm: FormGroup = this.formBuilder.group({
      one: this.formBuilder.group({
        field: [''],
      }),
    
      constructor(
      private formBuilder: FormBuilder
    ) {
  
      this.stepOne.subscribe(form =&gt;
        form.valueChanges.subscribe(val =&gt; {
          this.mainForm.controls.one.patchValue(val);
        })
      );
    
      stepReady(form: FormGroup, part) {
      switch (part) {
        case 'one': {
          this.stepOneSource.next(form);
          break;
        }
      }
    }
  </code></pre>