更改后的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`
});