Conveyor Recognition for formControlName

Question

I use model forms, where my form looks like this:

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
  <button type="submit" [disabled]="!form.valid">Submit</button>
</form>

I want to write a protractor specifier to verify entry. I would like to do something like the following in my specification:

    element(by.formControlName('username')).sendKeys('[e-mail]');

This obviously doesn't work, so is there a way to find form controls or have I come to terms with the fact that I need to put a class or ID in the input fields?

Answer 1

You can write a fairly simple CSS selector:

element(by.css("input[formControlName=username]")).sendKeys('[e-mail]');

---

Note that if you need to do this often, you can always define a custom locator:

by.addLocator('formControlName', function(value, opt_parentElement, opt_rootSelector) {
  var using = opt_parentElement || document;

  return using.querySelectorAll('[formControlName="' + value +'"]');
});

Using:

element(by.formControlName('username')).sendKeys('[e-mail]');