typescript 出现错误：formGroup 需要一个 FormGroup 实例。请传入一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48054863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting Error: formGroup expects a FormGroup instance. Please pass one in
提问by Pranjal Successena
I am new to Angular 2 and unable to resolve this issue even after going through other stack overflow answers.
我是 Angular 2 的新手，即使通过其他堆栈溢出答案也无法解决此问题。
I have just now started learning angular reactive forms and want to try the first example but am stuck. Please help.
我刚刚开始学习角反应形式，想尝试第一个例子，但被卡住了。请帮忙。
Here is the HTML form.
这是 HTML 表单。
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
<div id="user-data">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
formControlName="username"
class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
formControlName="email"
class="form-control">
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input
type="radio"
class="form-control"
formControlName="gender"
[value]="gender">{{ gender }}
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
And this is the TS file.
这是 TS 文件。
import { Component, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
genders = ['male', 'female'];
// property to hold the form
sigupForm: FormGroup;
ngOnInit() {
// initialize the form before rendering the template
// hence 'OnInit' because this gets executed before the template is rendered// pass js object
// {} tells this form doesn't has any 'controls'
// 'controls' are key-value pairs to the overall form group
this.sigupForm = new FormGroup({
// form controls
// arg1 - intial state/value of this control
// arg2 - single validator or an array of validators
// arg3 - async validators
'username': new FormControl(null),
'email': new FormControl(null),
'gender': new FormControl('male')
});
}
onSubmit() {
console.log(this.sigupForm);
}
}
In the output, I can see Username and Email Field but no Gender field.
在输出中，我可以看到用户名和电子邮件字段，但没有性别字段。
Would you please help me out with fixing this?
你能帮我解决这个问题吗？
I am sure it would be a minor change only but still, I am unable to figure out.
我相信这只是一个微小的变化，但我仍然无法弄清楚。
回答by woodykiddy
Please double check your component code. What I noticed is that the variable you defined there is different to the one specified in your template.
请仔细检查您的组件代码。我注意到您在那里定义的变量与模板中指定的变量不同。
You should change the reference of sigupFormto signupForminstead.
你应该改变的参考sigupForm来signupForm代替。
回答by HDJEMAI
formGroup expects a FormGroup instancemeans that you did not create an instance for the FormGroup defined in your template which is signupForm
formGroup expects a FormGroup instance意味着您没有为模板中定义的 FormGroup 创建实例 signupForm
so you have to create an instance for signupFormlike this:
所以你必须创建一个这样的实例signupForm：
this.signupForm = new FormGroup({
// form controls
// arg1 - intial state/value of this control
// arg2 - single validator or an array of validators
// arg3 - async validators
'username': new FormControl(null),
'email': new FormControl(null),
'gender': new FormControl('male')
});
回答by Prateek Kumar Dalbehera
In my case, I was using Reactive Forms and loading the data for form asynchronously from a service. But, the form template will start getting generated parallelly. And at that time form would be undefined as it would be built only after the data from API call was received. So, first, check if the form is initialized, then only start generating the template.
就我而言，我使用的是响应式表单并从服务异步加载表单数据。但是，表单模板将开始并行生成。那时表单将是未定义的，因为它只会在收到来自 API 调用的数据后构建。因此，首先检查表单是否已初始化，然后才开始生成模板。
<form class="col-sm-12 form-content" *ngIf="form" [formGroup]="form">
