title: Angular FormGroup invalid not correct during Cypress test
body: <p>I have a button that is disabled while the <code>formGroup</code> is invalid. The button becomes valid under the following condition:</p>
  
  <pre><code> const field = this.formBuilder.group({
        fieldType: new FormControl("", [Validators.required]),
        fieldName: new FormControl("", [
          Validators.required,
          Validators.minLength(2)
        ]),
        fieldValue: new FormControl("", [
          Validators.required,
          Validators.minLength(1)
        ]),
        fieldUnit: new FormControl("", [
          Validators.required,
          Validators.minLength(2)
        ])
      });
  </code></pre>
  
  <p>This works fine interacting manually and when running my Cypress test from the console</p>
  
  <pre><code> cy.contains("Save changes").click();
  </code></pre>
  
  <p>but when running from the Cypress electron browser the button is still disabled after valid entry has been made. I even tried waiting a second after input to no effect.</p>
  
  <p>This is the code that checks for validation ts and html respectively.</p>
  
  <pre><code> isInvalid(): boolean {
      const { invalid } = this.metadataForm; // FormGroup
      return invalid;
    }
  
  &lt;button
    mat-flat-button
    type="submit"
    color="primary"
    [disabled]="isInvalid()"
    (click)="doSave()"
  &gt;
    &lt;mat-icon&gt; save &lt;/mat-icon&gt;
    Save changes
  &lt;/button&gt;
  </code></pre>
  
  <p>In the electron browser one can clearly see that the button is disabled when it should be enabled. So why is the electron browser not performing correctly?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>@Prince kindly created a basic <a href="https://stackblitz.com/edit/angular-47uvne" rel="nofollow noreferrer">stackblitz</a>. I ran the same tests against this and it worked as it should. with the button becoming enabled and then being clicked. </p>
  
  <p>below is the test.</p>
  
  <pre><code>describe("visit", () =&gt; {
      it("should go to site", () =&gt; {
        cy.visit('https://angular-validation-kr7qun.stackblitz.io');
        cy.get('form.ng-untouched &gt; :nth-child(1) &gt; .ng-untouched').type("some name{enter}");
        cy.get(':nth-child(2) &gt; .ng-untouched').type("some name{enter}");
        cy.get(':nth-child(3) &gt; .ng-untouched').type("some name{enter}");
        cy.get(':nth-child(4) &gt; .ng-untouched').type("some name{enter}");
        cy.get('button').click()
      });
    });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Nl8CM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Nl8CM.png" alt="enter image description here"></a></p>
  
  <p>error in electron browser:</p>
  
  <blockquote>
    <p>vendor.js:68863 ERROR Error: Cannot find control with path: 'items ->
    0 -> fieldType'
        at _throwError (vendor.js:106904)
        at setUpControl (vendor.js:106812)
        at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl
    (vendor.js:110038)
        at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl
    (vendor.js:110639)
        at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges
    (vendor.js:110560)
        at checkAndUpdateDirectiveInline (vendor.js:85954)
        at checkAndUpdateNodeInline (vendor.js:94356)
        at checkAndUpdateNode (vendor.js:94318)
        at prodCheckAndUpdateNode (vendor.js:94859)
        at Object.eval [as updateDirectives] (ng:///ScientificMetadataModule/MetadataEditComponent.ngfactory.js:478)</p>
  </blockquote>
  
  <p>This this is actually an issue with the dynamic form implementation</p>