javascript - 更改后的 Angular Testing 输入值

Question

我想在测试时更改我的输入值，所以我做了:

const de = fixture.debugElement.query(By.css('[formControlName="username"]'));
de.nativeElement.value = "10";

然后我提交表单:

component.onSubmit();

并且输入的值仍然没有改变。 我尝试添加

fixture.detectChanges();

提交表单后，实际上什么也没做。

Answer 1

为什么要通过 CSS 选择器获取元素？ Angular 有一种方法可以创建 Reactive Forms这比你想做的要容易得多。举个例子:

export class ReactiveFormExampleComponent implements OnInit {
  public form: FormGroup;

  constructor () { } 

  ngOnInit(): void {
    this.form = new FormGroup({ 
      'username': FormControl(null, [/** Any form validators here **/]) 
    });
  }

  onSubmit(): void {
    // get the value of the username
    const username = this.form.get('username').value;
  }
}

如果您真的想在不按下带有附加点击事件的按钮的情况下观察值并检测更改，您可以在初始化表单后执行此操作。

this.form.get('username').valueChanges.subscribe(val => {
  // new username value is `val`
});