angular4 testing input values after change

Question

I would to change value of my input while testing so I did:

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

Then I submit the form:

component.onSubmit();

And the value of the input still is unchanged. I tried to add

fixture.detectChanges();

After submit the form, but it actually does nothing.

Answer 1

Why are you getting the element by the CSS selector? Angular has a way to create Reactive Forms which are MUCH easier than what you're trying to do. Take this example:

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

If you really wanted to watch the value and detect the changes without pressing a button with an attached click event you would do this after initializing the form.

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