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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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