Mixing
Angular reactive form inside angular material tab gives error
1
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)
angular tabs angular-material angular-material2 angular-reactive-forms
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
|
show 2 more comments
1
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)
angular tabs angular-material angular-material2 angular-reactive-forms
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
1
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
1
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
1
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28
|
show 2 more comments
1
1
1
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)
angular tabs angular-material angular-material2 angular-reactive-forms
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
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)
angular tabs angular-material angular-material2 angular-reactive-forms
angular tabs angular-material angular-material2 angular-reactive-forms
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
asked Nov 20 '18 at 14:39
JonnySprouseJonnySprouse
1017
1017
1
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
1
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
1
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28
|
show 2 more comments
1
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
1
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
1
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28
1
1
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
1
1
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
1
1
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28
|
show 2 more comments
1 Answer
1
active
oldest
votes
0
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.
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395424%2fangular-reactive-form-inside-angular-material-tab-gives-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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.
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
add a comment |
0
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.
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
add a comment |
0
0
0
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.
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
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.
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
answered Nov 20 '18 at 16:02
Muhammad Al FarisMuhammad Al Faris
263
263
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
add a comment |
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
Thanks, however, this doesn't give me the desired behaviour, nor is this the best solution. I might want a form in each tab, but, your method only allows one form across all tabs.
– JonnySprouse
Nov 20 '18 at 17:16
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
what angular or material angular version you used ?
– Muhammad Al Faris
Nov 21 '18 at 2:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395424%2fangular-reactive-form-inside-angular-material-tab-gives-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
move your form element above mat-tab-element component
– Chellappan
Nov 20 '18 at 14:43
I still get the same error - and the tab which has the form wrapping around it, no longer shows
– JonnySprouse
Nov 20 '18 at 14:45
1
please create stackblitz
– Chellappan
Nov 20 '18 at 14:47
There is nothing, stackblitz
– selem mn
Nov 20 '18 at 14:56
1
@sloth, NOT, create the FormGroup in ngOnInit and put in html < div *ngIf="form">...< /div>
– Eliseo
Nov 20 '18 at 15:28