Question

我有一个注册表：

<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">
    </div>
  </div>

我想在我的组件中添加输入文本作为新对象。我在角5编程。什么是最简单的方法？

Answer 1

解决这个问题的最佳方法是通过双向数据绑定。您需要做的第一件事是将FormsModule添加到NgModule导入列表中，如下所示。

<强> app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // MAKE SURE THIS IS IMPORTED

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // MAKE SURE THIS IS ADDED
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后，您需要更新组件.html文件以使用双向数据绑定。这会将指定的元素绑定到组件的.ts文件中的属性。

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

最后，确保在表单的.ts文件中有_fname和_lname属性。

export class SomeComponent {
    email = "";

    // Implement a function like this when submitting the form
    save() { 
        console.log(this.email);
        // Do whatever you'd like with this.email
    }
}

Angular - 从寄存器表单中保存数据

1 个答案: