testing angular template driven forms

Question

I am using angular 5, always the .controls property of the form is empty. Not sure why during testing angular doesn't create the form controls by reading the template file.

Template file

<form 
  #myForm="ngForm"
  novalidate>
  <input 
    #myCtrl
    required
    type="input" 
    name="myCtrl" 
    id="myCtrl"
    [(ngModel)]="value">
</form>

Component file

@ViewChild('myForm') myForm: NgForm;

In my tests, when I console.log the following, I get {}

fixture.debugElement.componentInstance.myForm.controls

The form also has errors: null and status VALID despite the fact that the form should contain an invalid FormControl. Is it possible to unit test forms when they are configured with ViewChild rather than FormBuilder? Is there a way to do it with my ViewChild setup?

or do we have to mock the form by creating the controls again using FormGroup and assign it to

componentInstance.myForm.controls?

Adrita Sharma · Accepted Answer · 2018-09-01 10:26:54Z

4

I was missing async in beforeEach(), though I had the testbed configuration in async.

Also use @ViewChild('nameOfForm') sampleForm: NgForm;

while the test runs the spec, the form controls specified in the template does gets initialized and available in component.sampleForm

edited Sep 1, 2018 at 10:26

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

answered Jun 20, 2018 at 16:16

Dew

1393 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2018-06-16 00:01:28Z

1

I think you need to put fixture.detectChanges() prior to checking for the controls.

answered Jun 16, 2018 at 0:01

Paul

4782 silver badges8 bronze badges

Collectives™ on Stack Overflow

testing angular template driven forms

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related