如何在 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 中获取表单数据的主要内容,如果未能解决你的问题,请参考以下文章