web-dev-qa-db-ja.com

Angular 6： 'form'の既知のプロパティではないため、 'formGroup'にバインドできませんか？

angular 2/4でフォームビルダーを使用しましたが、angular 6で使用しています。この質問を見ました（ 'formGroup'にバインドできません。は 'form' ）の既知のプロパティではありませんが、それは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 { }

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>

Console Image

javascriptangular5angular6angular-formsangular-formbuilder
12
Shubham Verma

app.module.tsに以下のコードを追加します：

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

インポート配列内：

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ]

FormGroup は、既存の FormGroupDirective をDOM要素と FormGroup にバインドするために主に使用される FormGroupDirective ディレクティブのセレクターです。 =は ReactiveFormsModule モジュールで利用可能です。

25
Prashant Pimpale

したがって、同じイライラする問題をいじりましょう-きれいなangle-cliのインストールとカスタムサブコンポーネント/モジュール（component.html ...）と同じエラー（「ではないので「formGroup」にバインドできません」 「フォーム」の既知のプロパティ」）。 Angular CLI：7.2.3、ノード：10.9.0、OS：win32 x64、Angular：7.2.2

I 最終的に動作するようになりました上記に基づいていますが、ひねりを加えて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 build/serveはエラーなしで機能しました。

私はAngularの専門家ではありませんが、app.module.tsがapp-routingに委任するv7のアプローチであり、後者のファイルはアプリとコンポーネントのインポートと依存関係が行われる場所です... 。YMMVですが、うまくいけばそれが助けになります。

2
MetaSimian
import these things in your appmodule.ts

imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
0
James Siva

Belows diffでapp.module.tsを次のように更新します enter image description here

0
joey