title: trouble unit testing reactive form fields in angular
body: <p>I'm learning Angular 2 and unit testing using @angular/cli 1.0.0-beta.30 and had a bit of success testing one aspect of a form field's validity, but not all. I'm using an inline template in my component for the time being to remove a layer of complexity for now (a form template in a separate file introduces asynchronicity, correct?). </p>
  
  <p>The <code>ngOnInit()</code> defines a <code>name</code> property  that includes the validators for "required" and "minLength". Currently an empty form field will correctly trigger the "required" validator but not the "minLength" validator. The <code>name.errors</code> array in the test does not contain any reference to required at all, <code>name.errors['minLength']</code> returns <code>undefined</code>. Does minLength need to be handled asynchronously? I'm having trouble finding docs or examples that fit my problem.</p>
  
  <pre><code>// signup-form.component.ts
  ...
  export class SignupFormComponent implements OnInit {
  
      user: FormGroup;
  
      constructor(private fb: FormBuilder) {
      }
  
      ngOnInit() {
          this.user = this.fb.group({
              name: ['', [Validators.required, Validators.minLength(2)]],
              account: this.fb.group({
                  email: ['', Validators.required, Validators.pattern("[^ @]*@[^ @]*")],
                  confirm: ['', Validators.required]
              })
          })
      }
  
      onSubmit({ value, valid }: { value: User, valid: boolean }) {
          console.log(value, valid);
      }
  
  }
  </code></pre>
  
  <p><strong>My test</strong></p>
  
  <pre><code>// signup-form.component.spec.ts
  import { SignupFormComponent } from './signup-form.component';
  
  describe('SignupFormComponent', () =&gt; {
      let component: SignupFormComponent;
      let fixture: ComponentFixture&lt;SignupFormComponent&gt;;
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [SignupFormComponent],
              imports: [
                  ReactiveFormsModule,
                  FormsModule
              ]
          })
              .compileComponents();
      }));
  
      beforeEach(() =&gt; {
          fixture = TestBed.createComponent(SignupFormComponent);
          component = fixture.componentInstance;
          component.ngOnInit();
          fixture.detectChanges();
      });
  
      it('should create', () =&gt; {
          expect(component).toBeTruthy();
      });
  
      it('form invalid when empty', () =&gt; {
          expect(component.user.valid).toBeFalsy();
      });
  
      it('name field validity', () =&gt; {
          let name = component.user.controls['name'];
          expect(name.valid).toBeFalsy();
  
          let errors = {};
          name.setValue("");
          errors = name.errors || {};
          expect(errors['required']).toBeTruthy(); // this works
          expect(errors['minLength']).toBeTruthy(); // this fails, "undefined"
      });
  
  });
  </code></pre>