我已经在角度2/4中使用过表单生成器,但是现在我在角度6中使用了它。我已经看到了这个问题(Can't bind to 'formGroup' since it isn't a known property of 'form'),但是它是针对角度2的。 我对角度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 { }
login.component.ts:
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 :(类似这样的东西)
<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>
答案 0 :(得分:17)
在您的app.module.ts
中添加以下代码:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
并在导入数组中:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
]
答案 1 :(得分:1)
所以摆弄同样令人沮丧的问题-干净的angular-cli安装和自定义子组件/模块(component.html ...)和相同的错误(“不能绑定到'formGroup',因为它“不是'form'的已知属性”)。 Angular CLI:7.2.3,节点:10.9.0,OS:Win32 x64,Angular:7.2.2
我最终使它奏效,但有一点曲折 我将FormsModule和ReactiveFormsModule导入放在 app-routing.module.ts (不是app.module.ts)+子组件的ts(在我的情况下:forms-demo.component.ts)中:>
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
....
@NgModule({
imports: [
RouterModule.forRoot(routes),
FormsModule, ReactiveFormsModule
....
随后ng构建/服务正常运行,没有任何错误。
我不是Angular专家,但我的猜测是v.7方法将app.module.ts委托给应用程序路由,后者是应用程序和组件导入与依赖的地方。...YMMV但是希望它会有所帮助。
答案 2 :(得分:0)
import these things in your appmodule.ts
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
答案 3 :(得分:0)
答案 4 :(得分:0)
类似于@ gloomy.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
中导入以下内容import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
....
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BrowserModule
]})
使用第二个模块的任何人,请遵循此步骤。
答案 5 :(得分:0)
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
],
答案 6 :(得分:-2)
由于不是'form'的已知属性,因此无法绑定到'formGroup'吗?为什么意味着?答:'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]
});