更改后的angular4测试输入值

Question

我会在测试时更改输入值，所以我做了：

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

然后我提交表格：

component.onSubmit();

并且输入的值仍保持不变。 我试图添加

fixture.detectChanges();

提交表单后，但实际上不执行任何操作。

Answer 1

为什么通过CSS选择器获取元素？ Angular有一种方法来创建反应式表单 ，这比您尝试做的要容易得多。 举个例子：

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

如果您确实希望观看该值并检测到更改而无需按下带有附加click事件的按钮，则可以在初始化表单后执行此操作。

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