質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

1498閲覧

ionicで、FormGroupを使ったファイルアップロード機能でテンプレートエラー

miichan

総合スコア1

Ionic

Ionicは、クロスプラットフォームに対応したモバイルアプリ開発のためのオープンソースUIフレームワークです。iOSやAndroid、Webのアプリケーションを1つのコードベースで開発できます。

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/06/19 02:13

前提・実現したいこと

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">
<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>
</form> </ion-content>

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問