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`
});

angular4测试更改后的输入值

1 个答案: