前提・実現したいこと
ionicで、ファイルアップロード機能を実装しています。
ionic serveコマンドでファイルアップロードのフォームテンプレートを表示しようとすると,
下記のエラーがでます。ご教授の程よろしくお願いいたします。
環境
ionic info
Ionic:
Ionic CLI : 5.4.16 (C:\Users\info\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.1
@angular-devkit/build-angular : 0.803.12
@angular-devkit/schematics : 8.3.12
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.0.0
Capacitor:
Capacitor CLI : 2.0.0
@capacitor/core : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
JSフレームワークは、AngularJSを使っています。
発生している問題・エラーメッセージ
Chromeブラウザの開発コンソールのエラー
core.js:4002 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" <ion-content> <form class="ion-padding" (submit)="editProfileImage()" [ERROR ->][formGroup]="uploadForm"> <ion-item lines="full" class="ion-padding-bottom"> "): ng:///EditProfileImagePageModule/EditProfileImagePage.html@7:58 No provider for ControlContainer (" <ion-content> [ERROR ->]<form class="ion-padding" (submit)="editProfileImage()" [formGroup]="uploadForm"> <ion-item line"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@7:2 No provider for NgControl (" <ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィール画像</ion-label> [ERROR ->]<ion-input type="file" formControlName="image" (change)="selectImageFile($event)"></ion-input> </"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@11:6 No provider for NgControl (" <ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィールカバー画像</ion-label> [ERROR ->]<ion-input type="file" formControlName="cover_image" (change)="selectCoverImageFile($event)"></ion-in"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@15:6 Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" <ion-content> <form class="ion-padding" (submit)="editProfileImage()" [ERROR ->][formGroup]="uploadForm"> <ion-item lines="full" class="ion-padding-bottom"> "): ng:///EditProfileImagePageModule/EditProfileImagePage.html@7:58 No provider for ControlContainer (" <ion-content> [ERROR ->]<form class="ion-padding" (submit)="editProfileImage()" [formGroup]="uploadForm"> <ion-item line"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@7:2 No provider for NgControl (" <ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィール画像</ion-label> [ERROR ->]<ion-input type="file" formControlName="image" (change)="selectImageFile($event)"></ion-input> </"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@11:6 No provider for NgControl (" <ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィールカバー画像</ion-label> [ERROR ->]<ion-input type="file" formControlName="cover_image" (change)="selectCoverImageFile($event)"></ion-in"): ng:///EditProfileImagePageModule/EditProfileImagePage.html@15:6 at syntaxError (compiler.js:2420) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:12208) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:27518) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:27505) at compiler.js:27448 at Set.forEach (<anonymous>) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:27448) at compiler.js:27358 at Object.then (compiler.js:2411) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:27357) at resolvePromise (zone.js:836) at resolvePromise (zone.js:795) at zone.js:897 at ZoneDelegate.invokeTask (zone.js:431) at Object.onInvokeTask (core.js:26246) at ZoneDelegate.invokeTask (zone.js:430) at Zone.runTask (zone.js:198) at drainMicroTaskQueue (zone.js:611)
該当のソースコード
<ion-header> <ion-toolbar> <ion-title>edit-profile-image</ion-title> </ion-toolbar> </ion-header> <ion-content> <form class="ion-padding" (submit)="editProfileImage()" [formGroup]="uploadForm"></form> </ion-content><ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィール画像</ion-label> <ion-input type="file" formControlName="image" (change)="selectImageFile($event)"></ion-input> </ion-item> <ion-item lines="full" class="ion-padding-bottom"> <ion-label>プロフィールカバー画像</ion-label> <ion-input type="file" formControlName="cover_image" (change)="selectCoverImageFile($event)"></ion-input> </ion-item> <ion-button expand="block" type="submit" >プロフィールイメージ投稿</ion-button>
HTML
1<ion-header> 2 <ion-toolbar> 3 <ion-title>edit-profile-image</ion-title> 4 </ion-toolbar> 5</ion-header> 6 7<ion-content> 8 <form class="ion-padding" (submit)="editProfileImage()" [formGroup]="uploadForm"> 9 10 <ion-item lines="full" class="ion-padding-bottom"> 11 <ion-label>プロフィール画像</ion-label> 12 <ion-input type="file" formControlName="image" (change)="selectImageFile($event)"></ion-input> 13 </ion-item> 14 <ion-item lines="full" class="ion-padding-bottom"> 15 <ion-label>プロフィールカバー画像</ion-label> 16 <ion-input type="file" formControlName="cover_image" (change)="selectCoverImageFile($event)"></ion-input> 17 </ion-item> 18 19 <ion-button expand="block" type="submit" >プロフィールイメージ投稿</ion-button> 20 </form> 21</ion-content> 22
edit-profile-image.page.ts
TS
1import { Component, OnInit } from '@angular/core'; 2import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms' 3import { HttpClient } from '@angular/common/http'; 4 5@Component({ 6 selector: 'app-edit-profile-image', 7 templateUrl: './edit-profile-image.page.html', 8 styleUrls: ['./edit-profile-image.page.scss'], 9}) 10export class EditProfileImagePage implements OnInit { 11 12 private formData: any; 13 public uploadForm: FormGroup = this.formBuilder.group({ title: ''});; 14 public image: any; 15 public cover_image: any; 16 17 constructor(private formBuilder: FormBuilder, private http: HttpClient) { 18 this.formData = new FormData(); 19 //this.uploadForm = this.formBuilder.group({ title: ''}); 20 } 21 22 ngOnInit() { 23 } 24 25 async editImageProfile() { 26 this.formData.append('image', this.uploadForm.get('image').value); 27 this.formData.append('cover_image', this.uploadForm.get('cover_image').value); 28 await this.http.post('http://13.115.2.76/api/movies', this.formData) 29 .subscribe( 30 data => console.log(data), 31 error => console.log(error) 32 ); 33 } 34 35 selectImageFile(event: any) { 36 if (event.target.files.length > 0) { 37 const file = event.target.files[0]; 38 this.uploadForm.get('image').setValue(file); 39 } 40 } 41 42 selectCoverImageFile(event: any) { 43 if (event.target.files.length > 0) { 44 const file = event.target.files[0]; 45 this.uploadForm.get('cover_image').setValue(file); 46 } 47 } 48 49} 50
app.module.ts
TS
1import { NgModule } from '@angular/core'; 2import { BrowserModule } from '@angular/platform-browser'; 3import { RouteReuseStrategy } from '@angular/router'; 4 5import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; 6import { SplashScreen } from '@ionic-native/splash-screen/ngx'; 7import { StatusBar } from '@ionic-native/status-bar/ngx'; 8 9import { AppRoutingModule } from './app-routing.module'; 10import { AppComponent } from './app.component'; 11import { Camera } from '@ionic-native/camera/ngx'; 12import { IonicStorageModule } from '@ionic/storage'; 13import { HttpClientModule } from '@angular/common/http'; 14import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 15import { File } from '@ionic-native/file'; 16import { Facebook } from '@ionic-native/facebook/ngx'; 17 18@NgModule({ 19 declarations: [AppComponent], 20 entryComponents: [], 21 imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, 22 IonicStorageModule.forRoot(), HttpClientModule, ReactiveFormsModule, FormsModule 23 ], 24 providers: [ 25 StatusBar, 26 SplashScreen, 27 Camera, 28 Facebook, 29 { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } 30 ], 31 bootstrap: [AppComponent] 32}) 33export class AppModule {} 34
あなたの回答
tips
プレビュー