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

Posted

技术标签:

【中文标题】如何在 Angular 2 中获取表单数据【英文标题】:How to get Form Data in Angular 2 【发布时间】:2017-05-02 22:01:59 【问题描述】:

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

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

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

【问题讨论】:

查看此链接...***.com/questions/41154319/… @AmitSuhag,我想知道如何通过点击事件和 onSubmit 方法绑定表单数据。然后如何对其进行字符串化。你能帮我提供一揽子解决方案吗...这对我很有帮助... 【参考方案1】:

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

    使用 formControlName(反应式表单) 使用文档对象 使用本地引用对象 使用 ngModel(模板驱动表单) 使用 ViewChild 使用 Input 原生事件

Click here详细阅读。

【讨论】:

【参考方案2】:

我通过将user.value 传递给提交方法来解决此问题,请参阅以下示例:

app.component.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);
   

【讨论】:

【参考方案3】:
<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>

-->

formData:FormGroup;

constructor()  

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

onSubmit() 

    console.log(this.formData.value);

【讨论】:

【参考方案4】:

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

模板驱动 反应性

我在这里分享简单模板驱动表单的代码。如果您想使用响应式表单,请查看此链接:Angular2 reactive form confirm equality of values

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

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)。我认为这绰绰有余。

【讨论】:

太棒了!非常感谢您对此的帮助 谁能帮我解决这个问题:***.com/questions/59319200/…

以上是关于如何在 Angular 2 中获取表单数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Angular 的 Typescript 中使用数组

如何在angular2的表单数组中显示嵌套数组数据?

如何从 Angular 1.5 组件中获取表单验证

如何在反应式表单中设置模型数据,Angular 9

在Angular 2中提交后如何清除表单?

如何使用 AngularFirebase 和 Angular 7 从用户集合中获取用户数据