Angular5：如何在component.ts中获取表单及输入框的值？

嘿，我来帮你搞定Angular里获取登录表单值的事儿！看你的代码用的是模板驱动表单（用到了ngModel和表单模板引用变量），我给你几种实用的方法：

方法1：通过表单引用变量获取整个表单的值 #

你已经在<form>标签里加了#loginForm="ngForm"，那我们可以直接在组件类里拿到这个表单的引用，进而获取所有输入框的值：

1. 首先在组件类里导入必要的模块：

import { Component, ViewChild, NgForm } from '@angular/core';

2. 使用@ViewChild装饰器获取表单引用：

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  // 获取模板里的loginForm引用
  @ViewChild('loginForm') loginForm!: NgForm;

  OnSubmit() {
    // 整个表单的所有值会以对象形式存在form.value里
    console.log('完整表单值:', this.loginForm.value);
    // 单独提取某个字段的值（对应输入框的name属性）
    const loginValue = this.loginForm.value.login;
    const passwordValue = this.loginForm.value.password;
    
    // 这里就可以用这些值写你的登录逻辑啦
  }
}

3. 记得修改模板里的(ngSubmit)，不需要传参数了：

<form (ngSubmit)="OnSubmit()" #loginForm="ngForm">

方法2：通过单个输入框的模板引用变量传值 #

如果你想保持原来的OnSubmit(login.value,password.value)写法，那需要给每个输入框添加模板引用变量：

1. 修改模板中的输入框，添加#login="ngModel"和#password="ngModel"：

<div class="form-group">
  <label for="exampleInputEmail1">Login</label>
  <input type="text" class="form-control" id="exampleInputEmail1" 
         ngModel name="login" #login="ngModel" 
         aria-describedby="emailHelp" placeholder="Login">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" 
         ngModel name="password" #password="ngModel" 
         placeholder="Password">
</div>

2. 在组件类里接收这两个参数：

OnSubmit(loginValue: string, passwordValue: string) {
  console.log('Login输入值:', loginValue);
  console.log('Password输入值:', passwordValue);
  // 直接用这两个参数处理登录逻辑即可
}

方法3：双向绑定[(ngModel)]获取值 #

这种方法更直观，直接把输入框的值绑定到组件类的属性上：

1. 在组件类里定义对应的属性：

export class LoginComponent {
  // 定义和输入框绑定的属性
  login: string = '';
  password: string = '';

  OnSubmit() {
    console.log('Login值:', this.login);
    console.log('Password值:', this.password);
    // 这里直接用类属性的值就好
  }
}

2. 修改模板中的输入框，使用双向绑定：

<div class="form-group">
  <label for="exampleInputEmail1">Login</label>
  <input type="text" class="form-control" id="exampleInputEmail1" 
         [(ngModel)]="login" name="login" 
         aria-describedby="emailHelp" placeholder="Login">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" 
         [(ngModel)]="password" name="password" 
         placeholder="Password">
</div>

3. 模板里的(ngSubmit)同样不需要传参数：

<form (ngSubmit)="OnSubmit()" #loginForm="ngForm">

小提示 #

• 如果需要表单的验证状态（比如是否合法、是否 touched 等），推荐用方法1，因为NgForm对象里包含了所有表单控件的状态信息；
• 如果只是简单获取输入值，方法3的双向绑定最省心；
• 不管哪种方法，输入框都必须加name属性，模板驱动表单才能正常识别控件哦！

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