[英]FormControl returning empty value in Angular 2
I am using a form我正在使用表格
<form [formGroup]="form">
<input type="text" value={{userDetails.first_name}} formControlName = "firstName">
<button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>
Here userDetails.first_name
value is Tom.这里
userDetails.first_name
的值是 Tom。 It is visible on UI inside text box ;它在文本框内的 UI 上可见; but when I submit form
form.firstName
is giving me empty value.但是当我提交表单时
form.firstName
给了我空值。
To get the value you should check form.value.firstName
not form.firstName
.要获取值,您应该检查
form.value.firstName
而不是form.firstName
。
To have a better idea of how form is structured, do a console.log(this.form)
on form submit.要更好地了解表单的结构,请在表单提交时执行
console.log(this.form)
。
Declare form group :声明表单组:
private userForm: FormGroup;
Initialize user form like this:像这样初始化用户表单:
userForm = form.group({
firstName: [firstName, [Validators.required]]
});
Declare your form in HTML like this:像这样在 HTML 中声明您的表单:
<form class="example-form " [formGroup]="userForm"
(ngSubmit)="onSubmit(userForm)">
<input type="text" value={{userDetails.firstName}} formControlName =
"firstName">
<button type="submit" data-action="save"/>
</form>
Make your onSubmit() method like this:使您的 onSubmit() 方法如下所示:
onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) {
const firstName= value.firstName;
}
html html
<form [formGroup]="form">
<input type="text" formControlName="firstName">
<button type="submit" data-action="save" (click)="onSubmit(form.value)">
</form>
component零件
you can set value like that你可以这样设置值
this.form.patchValue({firstName:this.userDetails.first_name});
make sure you create instance of form Group into component确保将表单 Group 的实例创建到组件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.