angular4 тестирование входных значений после изменения

Почему вы получаете элемент с помощью селектора CSS? Угловой способ создания реактивных форм, которые намного проще, чем то, что вы пытаетесь сделать. Возьмем следующий пример:

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