角度单元测试：如何以单元测试验证模板驱动形式？

Question

我有以下组件代码：

<form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
   <div class="form-group" >
      <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
      <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
   </div>
   <div class="form-group">
      <button type="submit" class="btn btn-primary margin-top-10 no-shadow full-width"><span class="text-uppercase">{{ 'login' | translate }}</span></button>
       </div>
</form> 

我尝试了下面的代码，但没有工作，总是得到失败的结果。

it('test invalid', () => {
  const hostElement = fixture.nativeElement;
  const username: HTMLInputElement = hostElement.querySelector('input[name="username"]');

  username.value = 'jhon';
  username.dispatchEvent(new Event('input[name="username"]'));

  fixture.detectChanges();

  let form = component.f.form.controls;
  expect(form.username.invalid).toBe(false);

});

单元测试是否有任何建议代码？