html - 在angular2中获取表单的所有值
问题描述
我可以使用以下代码获取表单的值:
<input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" #UserName class="form-control" mdbInputDirective>
<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(UserName.value)" mdbWavesEffect>Send
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
但我需要的是获取表单的所有值,以便我可以这样做:
<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(allFormValues)" mdbWavesEffect>Send
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
user: User;
ObSubmit(values) {
user.UserName = values.UserName;
user.Password = values.Password;
......
}
下面是整个代码:
<div class="row">
<div class="col-md-12 text-left">
<form [formGroup]="subscriptionForm">
<h3 style="color: gray; text-align: center;">Registration</h3>
<div class="row">
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" formControlName="UserName" id="UserName" class="form-control" mdbInputDirective>
<label for="UserName">Your UserName</label>
</div>
<br>
<div class="md-form">
<i class="fa fa-user prefix grey-text"></i>
<input type="text" formControlName="FirstName" id="FirstName" class="form-control" mdbInputDirective>
<label for="FirstName">Your First name</label>
</div>
</div>
<div class="col-md-6">
<div class="md-form">
<i class="fa fa-user-secret prefix grey-text"></i>
<input type="password" id="Password" formControlName="Password" class="form-control" mdbInputDirective>
<label for="Password">Your password</label>
</div>
<br>
<div class="md-form">
<i class="fa fa-user-user prefix grey-text"></i>
<input type="text" id="LastName" formControlName="LastName" class="form-control" mdbInputDirective>
<label for="LastName">Your Last name</label>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input type="email" id="Email" formControlName="Email" class="form-control" mdbInputDirective>
<label for="Email">Your Email</label>
</div>
<br>
{{subscriptionForm.value|json}}
<br>
<div class="text-center">
<button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()" mdbWavesEffect>Send
<i class="fa fa-paper-plane-o ml-1"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
import { User } from './../../shared/user.model';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
subscriptionForm: FormGroup;
user: User;
constructor(private fb: FormBuilder) {
this.subscriptionForm = fb.group({
UserName: ['', Validators.required],
Password: ['', Validators.required],
Email: ['', Validators.required, Validators.email],
FirstName: ['', Validators.required],
LastName: ['', Validators.required]
});
}
ngOnInit() {
}
OnSubmit() {
this.user = this.subscriptionForm.value;
console.log(this.user);
}
}
当我使用时,#subscriptionForm="ngForm"
我得到一个错误。大概是因为[formGroup]="subscriptionForm"
。我不知道什么是反应形式或其他形式。我会在这之后研究,但你能帮我吗?谢谢你。
解决方案
接受的答案已经过时,不再适用于 Angular 8+,这很好地获得了你的所有价值观:
for (const field in this.myForm.controls) { // 'field' is a string
console.log(this.myForm.controls[field].value);
}
推荐阅读
- rust - Rust 嵌入式应用程序在 AArch64 系统下未正确链接
- algorithm - 新值以单独的链接方式添加到链表的头部
- sql - LEFT JOIN ON 字符串匹配 非常慢
- c# - 如何计算鼠标在点击时移动的距离
- html - 如何在 html 中播放在线电台
- python - 根据元数据将图片移动到文件夹
- javascript - Javascript:确保一个异步函数在另一个完成之前不会运行;与承诺一起工作
- angular - 如何在 Typescript 中定义通用类型保护?
- javascript - 当我在警报提示中单击“否”时,切换开关返回到以前的状态
- spring-boot - Springboot App在docker上消耗太多内存