FormGroup не является известным свойством формы - PullRequest
Новая
       20

FormGroup не является известным свойством формы

0 голосов
/ 06 марта 2019

Я создаю регистрационную форму и получаю сообщение об ошибке, что группа форм не известна.У меня есть другие реактивные формы, и все они работают, но только эта.Я добавил весь импорт в модуль приложения и все.Интересно, если это потому, что страница регистрации в в app / core / auth.

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<div class="container" style="margin-top: 40px;">
  <form [ERROR ->][formGroup]="registrationForm">

app.module.ts 

imports: [
    FormsModule,
    ReactiveFormsModule
  ],

register.component.ts 

import { RegistrationModel } from './../../../shared/models/registration.model';
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  registrationForm: FormGroup;
  private registrationModel: RegistrationModel;

  constructor(private fb: FormBuilder) {
    this.registrationModel = new RegistrationModel;
  }

  ngOnInit() {
    this.registrationForm = this.fb.group({
      'first_name': [''],
      'middle_name': [''],
      'last_name': [''],
      'date_of_birth': [''],
    });
    this.registrationForm.valueChanges.subscribe(newVal => console.log(newVal));
  }
  onSubmit() {
    console.log(this.registrationForm);
  }
}

register html 

<div class="container" style="margin-top: 40px;">
  <form [formGroup]="registrationForm">
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-center">Register Account</h3>
        <hr>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label>First Name</label>
        <input type="text" class="form-control">
      </div>
      <div class="form-group col-md-6">
        <label>Middle Name</label>
        <input type="text" class="form-control">
      </div>
    </div>

Ответы [ 2 ]

1 голос
/ 06 марта 2019

например. app.module.ts 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

затем 

@NgModule({
  imports: [
    // ...
    FormsModule,
    ReactiveFormsModule,
    // ...
  ],
  // ...
})

в вашем компоненте 

import {
  FormGroup,
  FormBuilder,
  FormArray,
  FormControl,
  Validators
} from '@angular/forms';
import { Component, OnInit } from '@angular/core';

в вашем классе компонентов: 

export class MyFormWhatEverComponent implements OnInit {
// ...
myForm: FormGroup;
// ...

Конструктор: 

constructor(
    // ...
    private fb: FormBuilder,
    // ...
) {}

Затем я должен создать свою группу Form: 

buildMyForm () {
  this.myForm = this.fb.group({
    id: this.fb.control({ value: this.data.id }),
    // ...
  });
}

Последнее, но не менее важное, подумайте об инициализации: 

ngOnInit() {
    this.buildMyForm();
}
0 голосов
/ 06 марта 2019

И убедитесь, что вы импортируете необходимые модули из правильного источника, и обязательно импортируйте его в другой модуль, если вы используете его для компонента регистрации. Несколько модулей могут вызвать эту ошибку. Вам необходимо импортировать его в соответствующие модули. 

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [],
})

И вам не нужно импортировать ReactiveFormsModule в ваш компонент.

...