角度6のリアクティブフォームを使用して別のFormControlでFormDataを送信するにはどうすればよいですか?

Duy Khanh

Angular 6のリアクティブフォームを使用して、メールユーザー名やアバターなどのフィールドを含むフォームを作成します。画像をアップロードするにはフォームデータが必要ですが、Angular6のリアクティブフォームで使用する方法がわかりません。

マキシムペシュコフ

これを試して:

     <form [formGroup]="yourForm" (ngSubmit)="onSubmit()">
       <input type="text" formControlName="email"> <br>
       <input (change)="uploadDocument($event)" type="file" accept=".png, .pdf, .jpg, .jpeg"> <br>
       <input (change)="onSubmit()" type="submit" value="Send file">
     </form>  

あなたのapp.component.html、そして:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  yourForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.yourForm = this.fb.group({
      email: [''],
      file: ['']
    });
  }

  uploadDocument(event: any) {
    if (event.target.files && event.target.files[0]) {
      const reader = new FileReader();
      reader.onload = () => {
        this.yourForm.get('file').setValue(event.target.files[0]);
      };
      reader.readAsDataURL(event.target.files[0]);
    }
  }

  onSubmit(): void {
    const uploadData = new FormData();
    uploadData.append('email', this.yourForm.get('email').value);
    uploadData.append('file', this.yourForm.get('file').value);
    this.http.post('your-route', uploadData);
  }
}

あなたのapp.component.ts、そして:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

あなたのapp.module.tsファイルで。また、ルートをインラインで構成することを忘れないでくださいthis.http.post('your-route', uploadData);

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

リアクティブフォーム角度2の他のformControl値からformControl値を自動的に更新するにはどうすればよいですか?

分類Dev

Angular6を使用してFormArrayのみを使用してリアクティブフォームを作成するにはどうすればよいですか?

分類Dev

Angular 6でリアクティブフォームを使用してフィールドを非表示にした後、フォームを送信するにはどうすればよいですか?

分類Dev

リアクティブフォームを使用してラジオボタンの値を設定するにはどうすればよいですか?

分類Dev

角度のリアクティブフォームに特定の検証を追加するにはどうすればよいですか

分類Dev

リアクティブフォームを使用して、フォームをAngular 6のモデルにバインドするにはどうすればよいですか?

分類Dev

PHP関数include_once()を使用して他のディレクトリにフォームを送信するにはどうすればよいですか?

分類Dev

リアクティブフォームを使用してng-selectを無効にするにはどうすればよいですか?

分類Dev

javascriptを使用して一度アクティブ化しようとしたときにフォーム送信ボタンが再帰的にアクティブ化されないようにするにはどうすればよいですか?

分類Dev

別のコンポーネントをボタンクリックしてリアクティブフォームフィールドを更新するにはどうすればよいですか?

分類Dev

入力タイプのリアクティブフォームを、そのファイルのデータを含むファイルとして送信するにはどうすればよいですか?

分類Dev

React:APIから選択データを取得して別のAPIに投稿し、送信時にフィールドをクリアするフォームを作成するにはどうすればよいですか?

分類Dev

Angularディレクティブのホストプロパティを使用してフォームを送信するにはどうすればよいですか?ユニットテストにも適していますか?

分類Dev

PHP、送信後にこのフォームをクリアするにはどうすればよいですか?

分類Dev

アクティブなタブのフォームを送信するにはどうすればよいですか?

分類Dev

Javascriptを使用してフォームデータを別のページのテーブルに保存するにはどうすればよいですか?

分類Dev

リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

分類Dev

MonoTouchを使用してiOSのPOSTリクエストでフォームデータを送信するにはどうすればよいですか?

分類Dev

送信時にAngular7リアクティブフォームで検証を適用するにはどうすればよいですか?

分類Dev

カスタムリストビューを使用して特定のテキストビューテキストを別のアクティビティに送信するにはどうすればよいですか?

分類Dev

Linq to Entityを使用して、C#Windowsフォームアプリケーションの関連テーブルのフィールド順に結果をクエリするにはどうすればよいですか?

分類Dev

Angular 7:リアクティブフォームと一緒にファイル/画像を送信するにはどうすればよいですか?

分類Dev

リアクティブフォームでformControlsのグループをリセットするにはどうすればよいですか?

分類Dev

フォームの送信が成功した後、フォームの値をクリアするにはどうすればよいですか?

分類Dev

アクセス時に別のサブフォームに配置されているコンボボックスからサブフォームをフィルタリングするにはどうすればよいですか?

分類Dev

送信後にフォームから特定のフィールドのみをクリアするにはどうすればよいですか?

分類Dev

Angular6でリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

分類Dev

角度のあるマテリアルフォームフィールドでrequiredによって生成されたアスタリックのcssを変更するにはどうすればよいですか?

分類Dev

角度リソース保存メソッドでIDを使用して「フォームデータ」を送信するにはどうすればよいですか?

Related 関連記事

  1. 1

    リアクティブフォーム角度2の他のformControl値からformControl値を自動的に更新するにはどうすればよいですか?

  2. 2

    Angular6を使用してFormArrayのみを使用してリアクティブフォームを作成するにはどうすればよいですか?

  3. 3

    Angular 6でリアクティブフォームを使用してフィールドを非表示にした後、フォームを送信するにはどうすればよいですか?

  4. 4

    リアクティブフォームを使用してラジオボタンの値を設定するにはどうすればよいですか?

  5. 5

    角度のリアクティブフォームに特定の検証を追加するにはどうすればよいですか

  6. 6

    リアクティブフォームを使用して、フォームをAngular 6のモデルにバインドするにはどうすればよいですか?

  7. 7

    PHP関数include_once()を使用して他のディレクトリにフォームを送信するにはどうすればよいですか?

  8. 8

    リアクティブフォームを使用してng-selectを無効にするにはどうすればよいですか?

  9. 9

    javascriptを使用して一度アクティブ化しようとしたときにフォーム送信ボタンが再帰的にアクティブ化されないようにするにはどうすればよいですか?

  10. 10

    別のコンポーネントをボタンクリックしてリアクティブフォームフィールドを更新するにはどうすればよいですか?

  11. 11

    入力タイプのリアクティブフォームを、そのファイルのデータを含むファイルとして送信するにはどうすればよいですか?

  12. 12

    React:APIから選択データを取得して別のAPIに投稿し、送信時にフィールドをクリアするフォームを作成するにはどうすればよいですか?

  13. 13

    Angularディレクティブのホストプロパティを使用してフォームを送信するにはどうすればよいですか?ユニットテストにも適していますか?

  14. 14

    PHP、送信後にこのフォームをクリアするにはどうすればよいですか?

  15. 15

    アクティブなタブのフォームを送信するにはどうすればよいですか?

  16. 16

    Javascriptを使用してフォームデータを別のページのテーブルに保存するにはどうすればよいですか?

  17. 17

    リアクティブフォームを使用してAngular7で「少なくとも1つのフィールドに入力する必要がある」検証を設定するにはどうすればよいですか?

  18. 18

    MonoTouchを使用してiOSのPOSTリクエストでフォームデータを送信するにはどうすればよいですか?

  19. 19

    送信時にAngular7リアクティブフォームで検証を適用するにはどうすればよいですか?

  20. 20

    カスタムリストビューを使用して特定のテキストビューテキストを別のアクティビティに送信するにはどうすればよいですか?

  21. 21

    Linq to Entityを使用して、C#Windowsフォームアプリケーションの関連テーブルのフィールド順に結果をクエリするにはどうすればよいですか?

  22. 22

    Angular 7:リアクティブフォームと一緒にファイル/画像を送信するにはどうすればよいですか?

  23. 23

    リアクティブフォームでformControlsのグループをリセットするにはどうすればよいですか?

  24. 24

    フォームの送信が成功した後、フォームの値をクリアするにはどうすればよいですか?

  25. 25

    アクセス時に別のサブフォームに配置されているコンボボックスからサブフォームをフィルタリングするにはどうすればよいですか?

  26. 26

    送信後にフォームから特定のフィールドのみをクリアするにはどうすればよいですか?

  27. 27

    Angular6でリアクティブフォームコントロールに値を設定するにはどうすればよいですか?

  28. 28

    角度のあるマテリアルフォームフィールドでrequiredによって生成されたアスタリックのcssを変更するにはどうすればよいですか?

  29. 29

    角度リソース保存メソッドでIDを使用して「フォームデータ」を送信するにはどうすればよいですか?

ホットタグ

アーカイブ