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

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 2

Я создал простой пример привязки в форме на основе шаблона: 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 { }

Answer 3

Я думаю, что вы ищете [(ngModel)], который используется для двустороннего связывания данных.

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

PS: Чтобы использовать [(ngModel)], вам придется импортировать FormsModule и затем добавьте его в массив imports вашего AppModule или любого другого модуля, в котором вы его используете.

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