title: Angular Form persistence: restore Form after the component was destroyed
body: <p>I'm usig <code>FormBuilder</code> to have a simple form in my <strong>Angular 5.1.2</strong> project:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
    const formSettings = {
      name: ['', [Validators.required, Validators.maxLength(50), this.nameValidator]],
      deviceType: ['', [Validators.required]],
      description: ['']
    };
    this.newDeviceForm = this.formBuilder.group(formSettings);
  }
  </code></pre>
  
  <p>And the Form's template looks like:</p>
  
  <pre><code>&lt;form [formGroup]="newDeviceForm"&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput formControlName="name" name="name"&gt;
      &lt;mat-error *ngIf="newDeviceForm.get('name').hasError('required')"&gt;
        Device Name is required
      &lt;/mat-error&gt;
      &lt;mat-error *ngIf="newDeviceForm.get('name').hasError('maxlength')"&gt;
        Device Name should be no more than 50 characters
      &lt;/mat-error&gt;
    &lt;/mat-form-field&gt;
    &lt;!-- ... --&gt;
    &lt;mat-form-field&gt;
      &lt;input matInput formControlName="description" name="description"&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I want to implement a mechanism of Form persistence to satisfy following user story:</p>
  
  <ol>
  <li>User started working with Form.</li>
  <li>He made some field invalid and saw validation message.</li>
  <li>Then he went out to another page, Form had been destroyed.</li>
  <li>Then he returned to the Form page.</li>
  <li>Form restored, User saw his dirty field with validation message from p.2.</li>
  </ol>
  
  <p>I tried to persist the Form via global service in a way like:</p>
  
  <pre class="lang-js prettyprint-override"><code>ngOnInit() {
    if(this.devicesService.newDeviceForm) { // form caching
      this.newDeviceForm = this.devicesService.newDeviceForm;
      return;
    }
    const formSettings = { /* ... */ };
    this.newDeviceForm = this.formBuilder.group(formSettings);
    this.devicesService.registerForm(this.newDeviceForm); // populate DevicesService.newDeviceForm
  }
  </code></pre>
  
  <p>But it does not work. Is there some approach that could allow to persist whole the Form and make it reusable with all its specific properties?</p>