Угловая реактивная форма внутри вкладки углового материала дает ошибку - PullRequest
Новая
       27

Угловая реактивная форма внутри вкладки углового материала дает ошибку

0 голосов
/ 20 ноября 2018

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

Код 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 голосов
/ 20 ноября 2018

поместите ваш <form> тег перед <mat-tab-group>, это то, что вы можете сделать, чтобы исправить его.

, потому что мы не знаем, какой материал вы используете, или о вашей угловой версии.

но я уверен в этом, материальные проблемы.

...