Question

我正在尝试在项目中使用ReactiveFormsModule。所以我将其添加到app.module.ts：

import { NgModule }                                     from '@angular/core';
import { FormsModule, ReactiveFormsModule }             from '@angular/forms';
import { BrowserModule }                                from '@angular/platform-browser';
import { LocationStrategy,
         HashLocationStrategy }                         from '@angular/common';

import { AppComponent }                                 from './app.component';
import { Ng2BootstrapModule }                           from 'ng2-bootstrap/ng2-bootstrap';
import { NAV_DROPDOWN_DIRECTIVES }                      from './shared/nav-dropdown.directive';

import { ChartsModule }                                 from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES }                    from './shared/sidebar.directive';
import { AsideToggleDirective }                         from './shared/aside.directive';
import { BreadcrumbsComponent }                         from './shared/breadcrumb.component';

// Routing Module
import { AppRoutingModule }                             from './app.routing';

//Layouts
import { FullLayoutComponent }                          from './layouts/full-layout.component';
import { SimpleLayoutComponent }                        from './layouts/simple-layout.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        Ng2BootstrapModule,
        ChartsModule,

    ],
    declarations: [
        AppComponent,
        FullLayoutComponent,
        SimpleLayoutComponent,
        NAV_DROPDOWN_DIRECTIVES,
        BreadcrumbsComponent,
        SIDEBAR_TOGGLE_DIRECTIVES,
        AsideToggleDirective
    ],
    providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

这是我的组成部分：

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

@Component({
    templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;

    constructor( ) {
        this.loginForm = new FormGroup({});
    }

    ngOnInit(): void {

    }
}

我的模板：

<div class="container d-table">
    <div class="d-100vh-va-middle">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card-group">
                    <div class="card p-2">
                        <div class="card-block">
                            <form [formGroup]="loginForm">
                                <h1>Ingreso</h1>
                                <p class="text-muted">Ingrese a su cuenta</p>
                                <div class="input-group mb-1">
                                    <span class="input-group-addon"><i class="icon-user"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="Usuario">
                                </div>
                                <div class="input-group mb-2">
                                    <span class="input-group-addon"><i class="icon-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" placeholder="Contraseña">
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <button type="button" class="btn btn-primary px-2">Ingresar</button>
                                    </div>
                                    <div class="col-xs-6 text-xs-right">
                                        <button type="button" class="btn btn-link px-0">Olvidó su contraseña?</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

login.module.ts：

import { NgModule }                 from '@angular/core';

import { LoginComponent }       from './login.component';
import { LoginRoutingModule }   from './login-routing.module';

@NgModule({
    imports: [
        LoginRoutingModule
    ],
    declarations: [ LoginComponent ]
})
export class LoginModule { }

但我知道了：

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

当ReactiveFormsModule中未包含app.module时，它应该会显示，但正如您所看到的，它是导入的。我该如何解决？

Answer 1

LoginComponent未在提供AppModule的{{1}}中声明，它在ReactiveFormsModule中声明，这意味着您需要按顺序导入LoginModule在ReactiveFormsModule中创建反应式表单：

LoginComponent

Answer 2

就我而言，我在您的app.module.ts中包含了FormsModule

无法使用ReactiveFormsModule

2 个答案: