Angular 6: невозможно привязать к formgroup, так как это не известное свойство form

Я новичок в Angular 6 и работаю над ReactiveForms. Получаю эту ошибку и не могу скомпилировать. Я видел разные решения и добавил директиву ReactiveFormsModule в Imports, как это предлагается в решениях, но она показывает ту же ошибку. Пожалуйста помоги.

Делимся желаемым кодом и снимком экрана с ошибкой. app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { AuthorsService } from './authors.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent,
    SignupFormComponent,
    CoursesComponent,
    CourseComponent,
    AuthorsComponent,
    FavoriteComponent,
    TitleCasePipe,
    PanelComponent,
    LikeComponent,
    ZippyComponent,
    ContactFormComponent,
    NewCourseFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

Регистрация-form.ts

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });

}

signup-form.html

<form [FormGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input 
            formControlName="password"
            id="password" 
            type="text" 
            class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Скриншот ошибки

Попробуйте без скобок

Eduardo Vargas 10.09.2018 10:14

Вы пробовали использовать конструктор форм для создания группы форм?

user4676340 10.09.2018 10:19

@EduardoVargas без скобок? извини, я тебя не понял.

Abdul Hannan 10.09.2018 10:20

@trichetriche да

Abdul Hannan 10.09.2018 10:21

<form formGroup = "form">

Eduardo Vargas 10.09.2018 10:22

@EduardoVargas <form [formGroup]="form">

user4676340 10.09.2018 10:23

@EduardoVargas показывает эту ошибку ERROR: formControlName необходимо использовать с родительской директивой formGroup. Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе). Пример: <div [formGroup] = "myGroup"> <input formControlName = "firstName"> </div>

Abdul Hannan 10.09.2018 10:24

Извините, попробуйте <form formGroupName = "form">

Eduardo Vargas 10.09.2018 10:37

Вот ссылка на ответ. stackoverflow.com/questions/43248849/…

Muhammad Ayyaz 14.12.2019 09:06

Вот решение: введите описание ссылки здесь

Muhammad Ayyaz 14.12.2019 09:09
2
10
17 131
5

Ответы 5

Проблема связана с [FormGroup], используйте [formGroup]. Создал stackblitz https://stackblitz.com/edit/angular-xbp9fc

Пожалуйста, используйте ниже HTML

<form [formGroup]="form">
...
</form>

Ошибка возникает, поскольку вы используете заглавную F в [formGroup].

Вы можете использовать FormBuilder как это

import { Validators, FormBuilder, FormGroup, FormControl , ReactiveFormsModule } from '@angular/forms';
constructor(private builder: FormBuilder){}

 public complexForm: FormGroup = this.builder.group({
  'firstname' : '',
  'lastname': '',
});

В HTML

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">

 <div class="form-group" >
       <label>First Name:</label>
       <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
  </div>
</form>

Как упоминалось @srashtisj и @ suresh-kumar-ariya, вам нужно обновить соглашение с FormGroup до formGroup в вашей HTML-форме, и все должно работать нормально.

FormGroup tracks the same values and status for a collection of form controls.

Узнайте больше о создании экземпляра формы на Официальное руководство по форме Angular.

Включите ReactiveFormsModule в свой app.module.ts все директивы, которые используются как formGroup и т. д.

Они определены в этом модуле.

Другие вопросы по теме