Angular 5中如何将注册表单输入值存入组件对象？

嘿，这事儿用Angular的模板驱动表单就能轻松搞定，是最简洁的实现方式，不用复杂的响应式表单配置，几步就能把输入文本存入组件对象：

步骤1：在组件类中定义存储数据的对象 #

首先在你的组件.ts文件里，初始化一个用来存放表单数据的对象，比如：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 定义一个用户对象，用来存邮箱输入值
  user = { email: '' };

  // 可选：添加提交方法，用来验证或处理数据
  onSubmit() {
    console.log('已存储的邮箱:', this.user.email);
    // 这里可以把this.user作为新对象，做后续的存储/请求操作
  }
}

步骤2：修改模板，添加双向数据绑定 #

把你的HTML模板里的input字段加上[(ngModel)]双向绑定，绑定到刚才定义的user.email属性，同时别忘了加name属性（Angular模板驱动表单要求ngModel必须配合name使用）：

<form #registerForm="ngForm">
  <div class="form-group">
    <label for="email" class="col-sm-3 control-label">Email</label>
    <div class="col-sm-9">
      <input 
        type="email" 
        id="email" 
        placeholder="Email" 
        class="form-control"
        [(ngModel)]="user.email" 
        name="email"
      >
    </div>
  </div>

  <!-- 可选：添加提交按钮，触发组件里的处理方法 -->
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="button" class="btn btn-default" (click)="onSubmit()">提交</button>
    </div>
  </div>
</form>

步骤3：确保模块导入FormsModule #

最后，在你的组件所属的NgModule里导入FormsModule，因为模板驱动表单依赖这个模块才能正常工作：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { YourComponent } from './your-component.component';

@NgModule({
  imports: [
    // ...其他导入的模块（比如BrowserModule）
    FormsModule
  ],
  declarations: [YourComponent]
})
export class YourModule { }

这样就完成啦！用户在输入框里输入的内容会实时同步到组件中的user对象里，你可以随时通过this.user获取这个完整对象，用来做存储、API请求等后续操作。

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