vendredi 6 juillet 2018

How to test template driven forms in angular 6

I have a template driven form:

<form #form="ngForm" (ngSubmit)="onSubmit()">
      <input class="form-control input-lg" id="venue_name" name="venue_name" type="text" #venue_name="ngModel"
             [(ngModel)]="tournament.venue.venue_name" required>
      <input id="address" name="address" placeholder="search for location" required #address="ngModel"
             type="text" class="form-control input-lg" #search [(ngModel)]="tournament.venue.address">
</form>

In my component, I have:

@ViewChild(NgForm) ngForm: NgForm;

In my test, I have:

fixture = TestBed.createComponent(TournamentEditVenueComponent);
comp = fixture.componentInstance;
form = comp.ngForm.form;
console.log(form);

Here I can see in Chrome console:

FormGroup {venue_name: FormControl, address: FormControl, details: FormControl, country_id: FormControl}

So the form seems to be reachable

but when I try to reach it with

    console.log(form.controls);

or

    console.log(form.controls['venue_name']);

the first one is empty and the second one is undefined.

Why ? How should I do?

Aucun commentaire:

Enregistrer un commentaire