主页 / 问题 / 933914
Accepted
Max
Asked:2020-01-19 11:14:27 +0000 UTC2020-01-19 11:14:27 +0000 UTC

无法绑定到“formGroup”，因为它不是“form”的已知属性

  • 772

Angular: 7
有进入应用程序的组件。我收到一个错误：

未捕获的错误：模板解析错误：无法绑定到“formGroup”，因为它不是“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);
    }
}
angular2

1 个回答

  1. Best Answer

    *翻译答案
    为了消除错误，您需要将模块的导入添加到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 官方文档页面上找到。

    • 0

相关问题