角度6:由于不是'form'的已知属性,因此无法绑定到'formGroup'吗?

Shubham Verma:

我已经在angular 2/4中使用过表单生成器,但是现在我在angular 6中使用了它。我已经看到了这个问题(由于它不是'form'的已知属性,因此无法绑定到'formGroup'),但是它是针对角度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>

控制台映像

Prashant Pimpale:

在您的中添加以下代码app.module.ts

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

并在导入数组中:

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ]

FormGroup是对于一个选择FormGroupDirective指令,它主要用于绑定的现有FormGroup的DOM元素和FormGroupDirective是可用的在ReactiveFormsModule模块。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

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

Angular 2:由于它不是'input'的已知属性,因此无法绑定到'ngModel'

Angular 2:由于它不是已知的本机属性,因此无法绑定到x

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

Angular 2+和Observables:由于它不是'select'的已知属性,因此无法绑定到'ngModel'

尽管导入了FormsModule,但由于它不是'input'的已知属性,因此无法绑定到'ngModel'

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

Angular4异常:由于它不是'input'的已知属性,因此无法绑定到'ngClass'

无法绑定到“ FormGroup”,因为它不是“ form”的已知属性----

角度6:失败:模板解析错误:由于它不是'a'的已知属性,因此无法绑定到'routerLink'。(

自定义指令:由于它不是element的已知属性,因此无法绑定到指令

模板解析错误:无法绑定到“ formGroup”,因为它不是“ form”的已知属性

角度灯箱:由于它不是“ a”的已知属性,因此无法绑定到“数据灯箱”

无法绑定到“ FormGroup”,因为它不是“ form”的已知属性。(“

Angular 7测试:“无法绑定到formGroup,因为它不是form的已知属性”

无法绑定到“ formGroup”,因为它不是“ form”的已知属性。离子v5.2.2中的错误

错误NG8002:无法绑定到“ formGroup”,因为它不是“ form”的已知属性。在Angular 9中

Angular 9-无法绑定到“ formGroup”,因为它不是“ form”的已知属性

Angular Ivy:无法绑定到“ formGroup”,因为它不是“ form”的已知属性。但是导入了ReactiveFormsModule和FormsModule

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

无法绑定到“formGroup”,因为它不是“form”的已知属性。ReactiveFormsModule 已经导入

Angular 10 - 无法绑定到“formGroup”,因为它不是“form”的已知属性

Angular 错误消息:无法绑定到“formGroup”,因为它不是“form”的已知属性

无法绑定到“formGroup”,因为它不是 Angular 8 中“form”的已知属性

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

Angular 单元测试错误 - 无法绑定到“formGroup”,因为它不是“form”的已知属性

无法绑定到“formGroup”,因为它在使用 SharedModule 时不是“form”的已知属性

表单生成器角度无法绑定到“formGroup”,因为它不是“form”的已知属性

错误 NG8002:无法绑定到“formGroup”,因为它不是“form”的已知属性