Angular中点击事件无法获取文本框输入值该如何解决？

问题原因 #

• 你调用document.getElementById()时传入的参数txtOrderNo是未定义的变量，你给订单号输入框设置的DOM id是txtOrderNumber，需要传字符串形式的id值
• 直接通过原生DOM API操作元素不符合Angular的最佳实践，更推荐使用框架提供的模板引用、双向绑定能力实现需求

方案1：使用@ViewChild获取（推荐，你注释的代码修正后即可使用） #

1. 调整HTML代码，给订单号输入框添加模板引用标识：

<!-- 新增#txtOrderNumber模板引用 -->
<input type="text" #txtOrderNumber id="txtOrderNumber" nbInput fullWidth placeholder="Order Number">

2. 调整TS代码：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NbDateService } from '@nebular/theme';

@Component({
  selector: 'ngx-form-inputs',
  styleUrls: ['./place-order.component.scss'],
  templateUrl: './place-order.component.html',
})
export class PlaceOrderComponent {
  // 绑定模板中的#txtOrderNumber引用
  @ViewChild('txtOrderNumber') txtOrderNo: ElementRef<HTMLInputElement>;
  starRate = 2;
  heartRate = 4;
  radioGroupValue = 'This is value 2';

  min: Date;
  max: Date;

  constructor(protected dateService: NbDateService<Date>) {
    this.min = this.dateService.addDay(this.dateService.today(), -5);
    this.max = this.dateService.addDay(this.dateService.today(), 5);
  }

  ShowRawMaterials()  {
    // 从ElementRef中读取输入值
    const inputValue = this.txtOrderNo.nativeElement.value;
    alert(inputValue);
  }
}

方案2：保留原生DOM获取写法，直接修正参数 #

只需要修改ShowRawMaterials方法的代码即可：

ShowRawMaterials()  {
  // 传入字符串格式的id，注意加英文引号
  const inputValue = (document.getElementById('txtOrderNumber') as HTMLInputElement).value;
  alert(inputValue);
}

方案3：使用双向绑定（后续表单提交取值更方便） #

1. 调整HTML代码，给输入框绑定ngModel：

<input type="text" [(ngModel)]="orderNumber" id="txtOrderNumber" nbInput fullWidth placeholder="Order Number">

2. 调整TS代码：

export class PlaceOrderComponent {
  // 声明双向绑定变量
  orderNumber: string = '';
  // 其他原有变量、构造函数代码保持不变...

  ShowRawMaterials()  {
    // 直接读取绑定变量的值即可
    alert(this.orderNumber);
  }
}

注：使用双向绑定方案需要先在当前组件所属的NgModule的imports数组中引入FormsModule，否则会报错。

内容的提问来源于stack exchange，提问作者Zidane