Question

我是Angular 2的新手，即使经过其他堆栈溢出答案后也无法解决此问题

我刚刚开始学习角度反应形式，并想尝试第一个例子，但我被卡住了。请帮忙。

这是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);
  }
}

在输出中，我可以看到用户名和电子邮件字段，但没有性别字段。

请你帮我解决这个问题吗？

我相信这只会是一个小小的改变，但我仍然无法理解。

Answer 1

请仔细检查您的组件代码。我注意到你在那里定义的变量与模板中指定的变量不同。

您应该将sigupForm的引用更改为signupForm。

Answer 2

formGroup expects a FormGroup instance表示您没有为模板中定义的FormGroup创建实例signupForm

所以你必须为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')
});

Answer 3

就我而言，我使用的是反应式表单，并从服务异步加载表单的数据。但是，表单模板将开始并行生成。届时，表单将是未定义的，因为只有在收到来自API调用的数据后才会构建该表单。因此，首先，检查表单是否已初始化，然后才开始生成模板。

<form class="col-sm-12 form-content" *ngIf="form" [formGroup]="form">

获取错误：formGroup需要一个FormGroup实例。请在

3 个答案: