Angular中从输入框获取值的实现（附代码）

你的代码逻辑方向是对的，但存在一个潜在问题：*ngIf会在条件不满足时完全移除输入框的DOM节点，此时点击Send按钮会因为titleInput未定义报错。下面提供两种可行的实现方案：

方法一：保留模板引用变量，解决DOM销毁问题 #

把*ngIf替换成[hidden]，这样输入框DOM始终存在，只是通过CSS隐藏，模板引用变量#titleInput就能稳定访问：

<div class="container p-5 ">
  <input #titleInput [hidden]="!isClicked" type="text" class="col-4"><br>
  <button (click)="OnClick()" class="btn btn-primary col-2 ">
    Show 
  </button>
  <button (click)="Send(titleInput.value)" class="btn btn-success col-2 m-3">
    Send
  </button>
</div>

组件TS代码无需修改，点击Send按钮时就能正常获取输入框的值并弹出。

方法二：使用双向绑定（Angular推荐方案） #

这种方式更贴合Angular的响应式编程思路，无需依赖模板引用变量：

1. 先在app.module.ts中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修改HTML代码，用[(ngModel)]绑定组件变量：

<div class="container p-5 ">
  <input *ngIf="isClicked" [(ngModel)]="inputValue" type="text" class="col-4"><br>
  <button (click)="OnClick()" class="btn btn-primary col-2 ">
    Show 
  </button>
  <button (click)="Send(inputValue)" class="btn btn-success col-2 m-3">
    Send
  </button>
</div>

3. 更新组件TS代码，添加绑定变量：

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputValue = '';
  title = 'demoproject1';
  isClicked=false;

  Send(data: any) {
    alert(data);
  }

  OnClick() {
    this.isClicked=true;
  }
}

双向绑定会自动同步输入框内容和组件的inputValue变量，点击Send时直接传递该变量即可，不受*ngIf的DOM销毁影响，是更稳定的实现方式。

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