角度6:由于不是'form'的已知属性,因此无法绑定到'formGroup'吗? [英] Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?
问题描述
我在angular 2/4中使用过表单生成器,但是现在我在angular 6中使用了它.我已经看到了这个问题(),但它用于角度2. 我对角度4做完全相同的操作,但出现此错误.请帮忙: 我的代码是:
I have worked with form builder in angular 2/4, But now I am using it in angular 6. I have seen this question (Can't bind to 'formGroup' since it isn't a known property of 'form') but it was for angular 2. I doing exact same against angular 4 but I am getting this error. Please help: my code are:
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>
推荐答案
在app.module.ts
中添加以下代码:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
并在导入数组中:
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
]
FormGroup
是 FormGroup
到DOM元素和 FormGroupDirective
在 ReactiveFormsModule
模块中可用.
The FormGroup
is a selector for the FormGroupDirective
Directive which mainly used to Binds an existing FormGroup
to a DOM element and FormGroupDirective
is available in the ReactiveFormsModule
module.
这篇关于角度6:由于不是'form'的已知属性,因此无法绑定到'formGroup'吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!