出现错误:formGroup需要一个FormGroup实例.请传递一个

问题描述

我是Angular 2的新手，甚至在经历了其他堆栈溢出答案后也无法解决此问题.

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.

这是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>

这是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.

推荐答案

formGroup expects a FormGroup instance意味着您没有为模板中定义的FormGroup创建实例，该实例为signupForm

formGroup expects a FormGroup instance means that you did not create an instance for the FormGroup defined in your template which is signupForm

所以您必须像这样为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实例.请传递一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！