Angular reactive form inside angular material tab gives error

Question

When putting an Angular reactive form inside the Angular material tab, it gives an error. Is this a limitation of angular material tabs? Can you not have a form inside the tab? Is this something to do with the way the form loads, that the form is being initialised and then the tab (with the form inside it) is only being initialised afterwards. If so, is there a work around for this?

The TS code is as follows:

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!! :-)');
  }
}

The 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>

I then get the following error:

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)

Answer 1

place your <form> tag before <mat-tab-group>, that's a thing you can do for fixed it.

because we don't know how version material you are using it or about your angular version.

but I'm sure this it, the material issues.