0

Angular: 7
Есть компонент для входа в приложение. Получаю ошибку:

Uncaught Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.

HTML:

<form [formGroup]="loginForm" novalidate (ngSubmit)="authenticate()">
    <div class="row m-1">
        <div class="col-sm-3 col-md-2 col-lg-1">
            <span>Email:</span>
        </div>
        <div class="col-sm-4">
            <input class="form-control"
                   placeholder="Email"
                   formControlName="email"
                   name="email">
        </div>
    </div>

    <div class="row m-1">
        <div class="col-sm-3 col-md-2 col-lg-1">
            <span>Password:</span>
        </div>
        <div class="col-sm-4">
            <input class="form-control"
                   placeholder="Password"
                   formControlName="password"
                   name="password">
        </div>
    </div>

    <div class="row m-1">
        <div class="col">
            <button class="btn btn-primary"
                    [disabled]="loginForm.invalid">
                Log in
            </button>
        </div>
    </div>
</form>

TS:

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from "../shared/authentication.service";
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: 'cts-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;

    constructor(private authService: AuthenticationService,
                private formBuilder: FormBuilder) {
        this.loginForm = formBuilder.group({
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required]]
        })
    }

    ngOnInit() { }

    authenticate() {
        console.log(this.loginForm);
    }
}

1 ответ 1

0

*перевод ответа
Для устранения ошибки нужно добавить импорт модуля ReactiveFormsModule из @angular/forms в модуль, где подключается компонент использующий реактивные формы. Пример описания модуля в который импортируется ReactiveFormsModule:

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; //Импорт ReactiveFormsModule
import { LoginComponent }  from './login.component';

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule   // <-- Подключаем ReactiveFormsModule
    ],
    declarations: [
        LoginComponent         // <-- Здесь подключаем хотя бы один 
    ]                          //     компонент использующий реактивные формы
})

export class AuthenticationModule { }   // <-- Модуль в котором находится компонент 
                                        //     использующий реактивные формы

Селектор который используется в форме - formGroup, является селектором директивы FormGroupDirective, которая является частью модуля ReactiveFormsModule, поэтому его нужно импортировать. Он используется для привязки FormGroup объекта к DOM элементам. Больше информации можно найти на странице официальной документации Angular.

3
  • ну, может я ошибаюсь, но этот ответ идентичен тому, который уже был ;) 19 янв 2019 в 18:44
  • Что такое "коробка", что такое "пространство имен"? Вы многое знаете про Angular и вам кажется ваш ответ простым и понятным. Для новичка этого может быть не достаточно. См. короткие понятийные расстояния. Я не сразу решил дать свой ответ, сначала я попросил вас в комментариях дать пример кода. Ничего такого я не увидел. Тогда уже решил сам ответить.
    – Max
    19 янв 2019 в 19:20
  • вся проблема в том, что если человек уже знакомится с реактивными формами, то ему уже должно быть понятно, что такое модуль, как его импортировать и так далее. это идентично изучению лямбд в с++ без знания что такое функция (это просто пример). возможно вы забежали вперед паровоза? ну не мне конечно вас учить, большому кораблю - большое плавание 😉 19 янв 2019 в 19:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.