Javascript 角度6:Can'；t绑定到'；formGroup'；因为它不是'；t'的已知属性；表格'；？

我在angular 2/4中使用过form builder，但现在我在angular 6中使用它。我看过这个问题（），但它是针对angular 2的。 我对angular 4做了完全相同的操作，但我得到了这个错误。请帮助： 我的代码是：

app.module.ts：（我已导出FormsModule和ReactiveFormsModule）：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,LoginComponent,ForgotComponent
  ],
  imports: [
    BrowserModule,
    routing,

  ],
  providers: [
    LocalStorage,
  ],
  bootstrap: [AppComponent],

})
export class AppModule { }

import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
@Component({
    selector: 'login-app',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})

/**
 * LoginComponent class
 */

export class LoginComponent {
    private loginForm: any;
    loginValue:any;

    constructor(
        private formBuilder: FormBuilder,
        private _router: Router,
        private httpService: HttpService,
        private localStorage: LocalStorage,
    ) {
        this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
        });
    }
}

login.component.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';

import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';


@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,LoginComponent,ForgotComponent
  ],
  imports: [
    BrowserModule,
    routing,

  ],
  providers: [
    LocalStorage,
  ],
  bootstrap: [AppComponent],

})
export class AppModule { }

import { Component, ViewContainerRef, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { LocalStorage } from '../../services/localStorage.service';
import { environment } from '../../../environments/environment';
import { HttpService } from '../../services/http.service';
import { emailRegexp, passwordRegexp } from '../../constants';
@Component({
    selector: 'login-app',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})

/**
 * LoginComponent class
 */

export class LoginComponent {
    private loginForm: any;
    loginValue:any;

    constructor(
        private formBuilder: FormBuilder,
        private _router: Router,
        private httpService: HttpService,
        private localStorage: LocalStorage,
    ) {
        this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;

        this.loginForm = this.formBuilder.group({
            email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
            password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
        });
    }
}

login.component.html：（类似这样的内容）

登录

---

在您的

app.module.ts

中添加以下代码：

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

在导入数组中：

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ]

---

是指令的选择器，该指令主要用于将现有的绑定到DOM元素，并且在模块中可用。

更新app.module.ts，如下所示：

---

因此，我们不得不处理同样令人沮丧的问题——一个干净的angular cli安装和一个自定义子组件/模块（component.html…）以及同样的错误（“无法绑定到'formGroup'，因为它不是'form'的已知属性”）。 Angular CLI:7.2.3，节点：10.9.0，操作系统：win32 x64，Angular:7.2.2

基于以上内容，我终于让它开始工作了，不过有点曲折 我将FormsModule和ReactiveFormsModule导入放入app routing.module.ts（而不是app.module.ts）+子组件的ts（在我的示例中：forms demo.component.ts）：

之后，ng构建/服务工作没有任何错误

---

我不是一个角度专家，但我猜v7的方法是app.module.ts委托给app routing，后者的文件是app&组件导入和依赖发生的地方。。。。YMMV，但希望能有所帮助

类似于@glowy.penguin在评论中的回答，但不同的场景有相同的错误

在我的例子中，我使用了第二个模块和它自己的路由文件

│   app-routing.module.ts
│   app.module.ts
│
└───second-module
    │   second-routing-module.module.ts
    │   second.module.ts
    │
    └───component-1

我必须在second.module.ts中导入以下内容，而不是app routing.module.ts

 <form [formGroup]="loginForm" (ngSubmit)="loginForm.valid && login()" novalidate>

 <input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control">

<div class="col-12">
 <input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control">
 </div>

 <button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block">
            <div  *ngIf="!loading" class="sign-in">Sign in</div>
  </button>

  </form>

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
....
@NgModule({
  imports: [
CommonModule,    
FormsModule,
ReactiveFormsModule,
BrowserModule
]})

---

任何使用第二个模块的人，请遵循此操作。

无法绑定到“formGroup”，因为它不是“form”的已知属性？为什么意味着？回答：“ReactiveFormsModule”无法加载到组件中。您只需将组件名称添加到rootmodule（app.module.ts）中即可

我的解决方案：

**WITHOUT ROUTING**
      **app.modules.ts**
      STEP1 : import { FormsModule,ReactiveFormsModule } from '@angular/forms';
      STEP2 : check your component (AppComponent)loaded or not
               @NgModule({
                  declarations: [
                     AppComponent
                   ],
               imports: [
                 BrowserModule,
                 AppRoutingModule,
                 ReactiveFormsModule,
                 FormsModule
                ],
             providers: [],
             bootstrap: [AppComponent]
            })
      app.component.html
         use and check <form [formGroup]="registerForm"></form>



 **WITH ROUTING**
    Eg;I have 2 files - form.component.html,form.component.ts

             STEP1:Import and add component(FormComponent) loaded or not in app.component.ts(rootcomponent) below here.
import { FormComponent } from "./form/form.component";
                     @NgModule({
                          declarations: [
                             AppComponent,
                             FormComponent
                           ],
                       imports: [
                         BrowserModule,
                         AppRoutingModule,
                         ReactiveFormsModule,
                         FormsModule
                        ],
                     providers: [],
                     bootstrap: [AppComponent]
                    });

**无路由**
**app.modules.ts**
步骤1：从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
步骤2：检查您的组件（AppComponent）是否已加载
@NGD模块({
声明：[
应用组件
],
进口：[
浏览器模块，
批准模块，
反应形式模块，
FormsModule
],
提供者：[]，
引导：[AppComponent]
})
app.component.html
使用和检查
**带路由**
如；我有两个文件-form.component.html和form.component.ts
步骤1：在下面的app.component.ts（rootcomponent）中导入并添加已加载或未加载的组件（FormComponent）。
从“/form/form.component”导入{FormComponent}；
@NGD模块({
声明：[
应用组件，
FormComponent
],
进口：[
浏览器模块，
批准模块，
反应形式模块，
FormsModule
],
提供者：[]，
引导：[AppComponent]
});

我还不得不把它放在另一个地方。。。在我的

页面.module.ts

（我确实把它留在了app.module.ts中）答案应该有一些解释部分

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatButtonModule, MatCheckboxModule , MatTableModule, MatDialogModule, MatTabsModule, MatNativeDateModule, MatInputModule, MatSelectModule, MatFormFieldModule} from "@angular/material";
import { MyDialogComponent } from './my-dialog/my-dialog.component';
import {MatDatepickerModule} from '@angular/material/datepicker';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    MyDialogComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatTableModule,
    MatDialogModule,
    MatTabsModule,
    MatNativeDateModule,
    MatInputModule,
    MatSelectModule,
    MatDatepickerModule,
    FormsModule,
    ReactiveFormsModule,
    NgxMaterialTimepickerModule,
    CommonModule,
    MatFormFieldModule,
    AppRoutingModule
  ],