角材料选项卡中的角反应形式给出错误

时间:2018-11-20 14:39:32

标签: angular tabs angular-material angular-material2 angular-reactive-forms

将Angular反应形式放在Angular材质选项卡中时,会产生错误。这是角形材料凸耳的限制吗?标签页内不能有表格吗?这与表单的加载方式有关,即初始化表单,然后才初始化选项卡(其中包含表单)。如果是这样,是否可以解决此问题?

TS代码如下:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {

  generalForm : FormGroup;

  constructor(private formBuilder: FormBuilder) { } 

  ngOnInit() {
    this.generalForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit(form: NgForm) {
    // stop here if form is invalid
    if (this.generalForm.invalid) {
      return;
    }

    const email = form.value.email;

    alert('SUCCESS!! :-)');
  }
}

HTML:

<mat-tab-group>
    <mat-tab label="Basic Data">
      <form [formGroup]="generalForm" #f="ngForm">

          <label>
            Email:
            <input type="text" matInput formControlName="email">
          </label>

          <label>
            Last Name:
            <input type="text" matInput formControlName="password">
          </label>

        </form>
    </mat-tab>
    <mat-tab label="Not So Basic Data">
        <form>
      <mat-form-field appearance="outline">
        <mat-label>License Number</mat-label>
        <input matInput>
          </mat-form-field>
        </form>
    </mat-tab>
</mat-tab-group>

然后我得到以下错误:

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });
    at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.missingFormException (forms.js:1134)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._checkFormPresent (forms.js:4520)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:4430)
    at checkAndUpdateDirectiveInline (core.js:9247)
    at checkAndUpdateNodeInline (core.js:10515)
    at checkAndUpdateNode (core.js:10477)
    at debugCheckAndUpdateNode (core.js:11110)
    at debugCheckDirectivesFn (core.js:11070)
    at Object.eval [as updateDirectives] (ProfileComponent.html:3)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11062)

1 个答案:

答案 0 :(得分:0)

<form>标记放在<mat-tab-group>之前,这是您可以用来修复它的事情。

因为我们不知道您使用的版本材料或关于您的角版本。

但是我确定这是实质性问题。