title: Anguar 7 used NGRX and problem with e2e test with protactor
body: <p>i have some problem with my app..</p>
  
  <p>office.components.html</p>
  
  <pre><code>&lt;div class="form-group" [class.text-danger]="form.name?.invalid &amp;&amp; (form.name?.dirty || form.name?.touched)"&gt;
     &lt;label for="name"&gt;OFFICE&lt;/label&gt;
     &lt;input name="name" type="text" class="form-control input-lg" value="" formControlName="name"
       [class.border-danger]="form.name?.invalid &amp;&amp; (form.name?.dirty || form.name?.touched)" required /&gt;
     &lt;div *ngIf="form.name?.errors &amp;&amp; (form.name?.dirty || form.name?.touched)"&gt;
       &lt;div [hidden]="!form.name?.errors.required"&gt;Office required&lt;/div&gt;
       &lt;div [hidden]="!form.name?.errors.minlength"&gt;Office is too short&lt;/div&gt;
       &lt;div [hidden]="!form.name?.errors.maxlength"&gt;Office is too long&lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>office.components.ts</p>
  
  <pre><code>officeForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(250)]],
  });
  
  
  ngOnInit() {
      this.store.dispatch(new FetchOffice());
      this.officeSubscription = this.store.select('office').subscribe((officeState: OfficeState) =&gt; {
          this.officeForm.patchValue(officeState);
      });
  }
  </code></pre>
  
  <p>office.e2e-spec.ts</p>
  
  <pre><code>it('check error message for required input', () =&gt; {
      const formNameElement = element(by.name('name'));
      formNameElement.clear();
      formNameElement.sendKeys(protractor.Key.TAB);
      const formNameElementParent = formNameElement.element(by.xpath('..'));
      const formNameElementError = formNameElementParent.element(by.xpath('div/div[1]'));
      expect(formNameElementError.getText()).toEqual('Office required');
  });
  </code></pre>
  
  <p>error Failed: No element found using locator: By(xpath, div/div[1])</p>
  
  <p>but the test below works</p>
  
  <pre><code>it('check error message for required input', () =&gt; {
      const formNameElement = element(by.name('name'));
      formNameElement.clear();
      formNameElement.sendKeys('1');
      formNameElement.sendKeys(protractor.Key.TAB);
      const formNameElementParent = formNameElement.element(by.xpath('..'));
      const formNameElementError = formNameElementParent.element(by.xpath('div/div[2]'));
      expect(formNameElementError.getText()).toEqual('Office is too short');
  });
  </code></pre>
  
  <p>when i removes</p>
  
  <pre><code>this.officeForm.patchValue(officeState);
  </code></pre>
  
  <p>all test works</p>