- 首页
- 其他开发
- 出现错误:formGroup 需要一个 FormGroup 实例.请传入一份
出现错误:formGroup 需要一个 FormGroup 实例.请传入一份
[英] Getting Error: formGroup expects a FormGroup instance. Please pass one in
本文介绍了出现错误:formGroup 需要一个 FormGroup 实例.请传入一份的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Angular 2 的新手并且无法解决这个问题即使在通过其他堆栈溢出答案之后.
我刚刚开始学习角反应形式，想尝试第一个例子，但被卡住了.请帮忙.
这是 HTML 表单.
<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="用户数据"><div class="form-group"><label for="username">用户名</label><输入类型=文本"id="用户名"formControlName="用户名"class="表单控件">
<div class="form-group"><label for="email">电子邮件</label><输入类型=电子邮件"id="电子邮件"formControlName="电子邮件"class="表单控件">
<div class="radio" *ngFor="让性别的性别"><标签><输入类型=收音机"类=形式控制"表单控件名称=性别"[value]="性别">{{ 性别 }}
<button class="btn btn-primary" type="submit">Submit</button></表单>
这是 TS 文件.
import { Component, OnInit } from '@angular/core';从@angular/forms"导入{FormGroup}；从'@angular/forms'导入{FormControl}；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {性别 = ['男', '女'];//保存表单的属性sigupForm:表单组；ngOnInit() {//在渲染模板之前初始化表单//因此 'OnInit' 因为它在模板渲染之前被执行//传递 js 对象//{} 告诉这个表单没有任何控件"//'controls' 是整个表单组的键值对this.sigupForm = new FormGroup({//表单控件//arg1 - 此控件的初始状态/值//arg2 - 单个验证器或验证器数组//arg3 - 异步验证器'用户名':新的表单控件(空)，'email': new FormControl(null),'性别': new FormControl('male')});}提交(){控制台日志(this.sigupForm)；}}
在输出中，我可以看到用户名和电子邮件字段，但没有性别字段.
你能帮我解决这个问题吗?
我确信这只是一个微小的变化，但我仍然无法弄清楚.
解决方案
formGroup expects a FormGroup instance 表示您没有为模板中定义的 FormGroup 创建实例，即 signupForm
所以你必须像这样为 signupForm 创建一个实例:
this.signupForm = new FormGroup({//表单控件//arg1 - 此控件的初始状态/值//arg2 - 单个验证器或验证器数组//arg3 - 异步验证器'用户名':新的表单控件(空)，'email': new FormControl(null),'性别': new FormControl('male')});
I am new to Angular 2 and unable to resolve this issue even after going through other stack overflow answers.
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.
<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.
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.
解决方案
formGroup expects a FormGroup instance means that you did not create an instance for the FormGroup defined in your template which is signupForm
so you have to create an instance for signupForm like this:
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')
});
这篇关于出现错误:formGroup 需要一个 FormGroup 实例.请传入一份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
