『自由力』を身に付けるサイト「リバトレ」も見てね!!

【Angular】同一ファイル再選択でchangeイベントを発火させる方法!

悩んでいる男の子

同一ファイルを再選択した場合にchangeイベントを発火させるにはどうしたらいいのかな?

こんな悩みを解決します。

  • 本記事の内容
  • 同一ファイル再選択でchangeイベントを発火させる方法
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、同一ファイル再選択でchangeイベントを発火させる方法を解説します

いずみん

すぐ終わるので、最後まで読んでみてください!

目次

同一ファイル再選択はchangeイベントが発火しない ?!

そもそもの話なのですが、同一ファイルを再選択した場合、changeイベントは発火しません。

同一ファイル選択でchangeイベントを走らせる方法

<input type="file" #fileInput (change)="onChangeFile()" />

上記のようにHTMLが定義されているとします。

@ViewChild('fileInput') fileInput: any;

TypeScript側では、上記のようにファイルを取得します。

this.fileInput.nativeElement.value = ''; // valueに空白を設定しないと、changeイベントが発火しない

あとはchangeイベント内の最初に、上記のようにvalueを空にしてあげればOKです。

まとめ

今回は、同一ファイル再選択でchangeイベントを発火させる方法を解説しました

意外と簡単でしたがAngularの情報は少ないですね。。

ではまた!

  • おススメ本はこちら!
いずみん

僕は↓の本でAngularの勉強をしました!
非常に分かりやすいので是非!

【Angular】同一ファイル選択でchangeイベントを走らせる方法!

この記事が気に入ったら
フォローしてね!

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる