При помещении угловой реактивной формы на вкладку угловой материал выдает ошибку.Это ограничение угловых вкладок материала?Не можете ли вы иметь форму внутри вкладки?Это как-то связано с тем, как загружается форма, что форма инициализируется, а затем вкладка (с формой внутри нее) инициализируется только потом.Если да, то есть ли обходной путь для этого?
Код 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)