Angular 2 将 HTML 输入绑定到 Vue 中的组件变量？

Question

所以我已经为此苦苦挣扎了很长时间...我一直在研究文档，但是组件和 DOM 之间有很多不同的指令和通信方式，但只有几个很好的例子...

所以我实际上什至不确定我需要什么。假设我的 tables.component.html 文件中有一个用户输入，如下所示：

<label>Name</label>
<input id="customerName" class="form-control" required>

然后是我的 tables.component.ts 文件，如下所示：

import { Component, OnInit } from '@angular/core';
import { isLoggedIn } from '../../assets/js/auth.js';
import { Router } from '@angular/router';


@Component({
  selector: 'app-tables',
  templateUrl: './tables.component.html',
  styleUrls: ['./tables.component.css']
})

export class TablesComponent implements OnInit {

  customers = [];

  id = ""; // keep outside of object to prevent user changes
  customer_form = {
    name: "",
    job: "",
    address: "",
    birthdate: "",
    email: "",
  }

  constructor(private router: Router) { }

    ...
}

为了简单起见：我想将上面的用户输入绑定到我的组件中的 customer_form.name 变量。我正在寻找 Vue 2.0 模型的等价物，这样如果用户更改输入值，组件值也会更改。我不必在表单中推送数据，因为我们的任务是不设置任何后端...

无论如何，我有点困惑。我阅读了文档，但这使情况变得更糟。一页说我应该在表单中添加一个控制器并在 HTML 底部添加一个脚本，另一页说我必须制作一个应该存储在组件中的表单模板......然后在那里有很多不同的指令来绑定东西。我假设你想为此使用 ngModel，但我似乎无法像我找到的示例中那样让它工作。

提前感谢您的帮助..

Answer 1

我认为您正在寻找的是 [(ngModel)]，它用于双向数据绑定。

<input 
  id="customerName" 
  class="form-control" 
  required 
  [(ngModel)]="customer_form.name"
  name="name">

PS：要使用[(ngModel)]，您必须导入FormsModule，然后将其添加到AppModule 的imports 数组或您正在使用它的任何模块中。

...
import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [ 
    ..., 
    FormsModule, 
    ...
  ],
  ...
})
export class AppModule { }

Answer 2

Use ngModel for two-way data binding
put [(ngModel)] on the input to pass the data from & to your property like this:


//app.module code
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';         //<---- IMPORTED

import { AppComponent }  from './app.component';
import { TablesComponent } from './tables.component';  //<---- IMPORTED

@NgModule({
  imports: [
    BrowserModule,
    FormsModule                 //<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    TablesComponent    //<---- IMPORTED
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
//--------------------------tables.component.html
    <input id="customerName" class="form-control" [(ngModel)]="customer_form.name" required>

Answer 3

我创建了一个简单的模板驱动表单绑定示例：https://stackblitz.com/edit/angular-m2tkrf

请注意，FormsModule 是在 app.module.ts

中导入的

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';         //<---- IMPORTED

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule                 //<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }