Reputation: 420
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)
Upvotes: 3
Views: 6753
Reputation: 1
I had a same problem and I found out this is happening because the form is not initialised on DOM compilation. So I initialised my form in ngOnInit and it worked for me. Please try that too.
Upvotes: 0
Reputation: 346
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.
Upvotes: 1