如何通过angular6中的target.querySelector获取输入值

Question

我正在尝试使用target.querySelector获取用户名和密码输入字段值，但是我没有找到异常值，有人可以建议我

.html

 <input type="text" id="userName"/><br>
  <input type="text" id="password"/><br>
  <button (click)="sendValues($event)">Send</button>

.ts

 sendValues(event): void {
    event.preventDefaults();
    const target = event.target;
    const userName = target.querySelector('#userName').value;
    const password= target.querySelector('#password').value;
    alert(userName+" "+password);
  }

Answer 1

您应使用ngModel指令绑定到类属性。

否则，您可以使用templateRef变量并通过事件绑定发送数据。

<input type="text" id="userName" #username /><br>
<input type="text" id="password" #password /><br>
<button (click)="sendValues(username, password)">Send</button>

在处理程序中，您可以直接访问username.value和password.value

Answer 2

sendValues(event): void {
    event.preventDefaults();
    let elem: HTMLInputElement;
    elem = document.querySelector('#userName');
    const userName = elem.value;
    elem= document.querySelector('#password');
    const password=elem.value;
    alert(userName+" "+password);
  }