如何在 Angular 2 中获取表单数据

Question

我的 angular 2 项目中有一个表单。

我知道如何从 API 中检索数据。 但不知道如何在那里执行 CRUD 操作。

任何人都可以帮助我使用有关如何将 JSON 格式的表单数据发送到 PHP/任何其他语言的 Web 服务的简单代码...

Answer 1

在 Angular 2+ 中，我们以两种方式处理表单：

• 模板驱动
• 反应式

我在这里分享简单模板驱动表单的代码。 如果您想使用反应式形式进行操作，请查看此链接： Angular2 反应式形式确认值的相等性

你的模块文件应该有这些：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MyApp } from './components'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}

platformBrowserDynamic().bootstrapModule(MyAppModule)

简单注册html文件：

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

现在你的 registration.ts 文件应该是这样的：

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

@Component({
  selector: 'register-form',
  templateUrl: 'app/register-form.component.html',
})
export class RegisterForm {
  registerUser(form: NgForm) {
    console.log(form.value);
    // {email: '...', password: '...'}
    // ... <-- now use JSON.stringify() to convert form values to json.
  }
}

要在服务器端处理此数据，请使用此链接： How to post json object with Http.post (Angular 2) (php server side) 。 我认为这已经绰绰有余了。

Answer 2

<form [formGroup]="formData" (ngSubmit)="onSubmit()">
Name<input type="text" formControlName="name"><br><br>
City<select formControlName="city">
    <option value="kkp">KKP</option>
    <option value="MKT">MKT</option>
</select><br><br>

-->

表单数据：表单组；

constructor() { }

ngOnInit() {
    this.formData = new FormGroup({
        name    : new FormControl(),
        city    : new FormControl()
    });
}
onSubmit(){ 

    console.log(this.formData.value);

}

Answer 3

我通过将user.value传递给 submit 方法解决了这个问题，请参见以下示例：

应用程序组件.html

<form #user="ngForm" (ngSubmit)="onSubmit(user.value)">
  <input type="text" name="email" placeholder="Email" ngModel required>
  <input type="password" name="passwd" placeholder="Password" ngModel required>
  <input type="submit" value="Submit">
</form>

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor() { }
   onSubmit(data) {
      console.log("Email: " + data.email
                 +"Password: " + data.passwd);
   }
}

Answer 4

在 Angular 应用程序中获取表单值的方法

1. 使用 formControlName（反应式表单）
2. 使用文档对象
3. 使用本地引用对象
4. 使用 ngModel（模板驱动表单）
5. 使用 ViewChild
6. 使用输入本机事件

点击这里阅读详细信息。