トラブル集

Tweet

FormControl, FormGroupをインポートするとエラー

現象

次のメッセージが表示され、コンパイルが通らない。
*
This likely means that the library (@angular/forms) which declares FormControl has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
*

発生条件

app.modules.tsでFormControlをインポートしている場合。

原因

angularのバージョンアップが原因と思われる。ちょっと前までは大丈夫な書き方だった。
しかし、★の部分に示すようにFormControlをインポートすると、コンパイルエラーになる。

import { FormControl, ReactiveFormsModule } from '@angular/forms';　★

@NgModule({
  declarations: [
    AppComponent,
    BlasAuthComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormControl, ★
  ],
  providers: [],
  bootstrap: [BlasAuthComponent]
})

対処方法

1. app.modules.tsからFomControlを消す。ただし、ReactiveFormsModuleはインポートしておく（★部分）。

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

import { AppComponent } from './app.component';
import { BlasAuthComponent } from './blas-auth/blas-auth.component';

@NgModule({
  declarations: [
    AppComponent,
    BlasAuthComponent,
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, ★
  ],
  providers: [],
  bootstrap: [BlasAuthComponent]
})
export class AppModule { }

1. コンポーネントでFormControlとFormGroupをインポートする（★部分）。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'; ★

@Component({
  selector: 'app-blas-auth',
  templateUrl: './blas-auth.component.html',
  styleUrls: ['./blas-auth.component.css']
})
export class BlasAuthComponent implements OnInit {

  message:string="";

  loginForm: FormGroup = new FormGroup({
    userName: new FormControl(''),
    password: new FormControl('')});


  constructor() { }

  ngOnInit(): void {

  }

  onSubmit() {
    let result = this.loginForm?.value;
    this.message = JSON.stringify(result);
    console.log(this.message);

  }

}

これで、FormControl,FormGroupを使用できる。
イイねと思った方は左上の★ボタンを押してください。