title: Angular 5, what is the best way to share a form between different components
body: <p>I have a main form in a service called "MainService"- (the real form is much longer). 
  Looks like this-</p>
  
  <pre><code>export class MainService {
  
   this.mainForm = this.formBuilder.group({
              A: ['', Validators.required],
              B: '',
              C: '',
              D: this.formBuilder.array([]),
              E: this.formBuilder.array([]),
              F:'',
              G: this.formBuilder.array([]),
              H: this.formBuilder.array([]),
              I: this.formBuilder.array([]),
          });
      }
  }
  </code></pre>
  
  <p>Different components look at the form's values and change the form by importing the service. the template looks like-</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;input matInput [formControl]="MainService.A"&gt;
      &lt;mat-label&gt;&lt;/mat-label&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Is it the best way to share the form between the different components?
  Each component represents a different form control in the form so they must look at the same form. </p>
  
  <p>For example this is a form for a student to fill many details about an article he read (name of the book, number of pages, authors, topics and so on). Each detail of the book is a form control in the main form, and each component is responsible for updating a different form control (component that represents the name input, component that represents the authors input..) </p>
  
  <p>Thanks!</p>