【Angular】NgFormを用いて画像のアップロードとPreview表示をする

【Angular】NgFormを用いて画像のアップロードとPreview表示をする:

こんにちは

昨日、画像のアップロードとPreview表示について記事を書きました。
https://qiita.com/TakahitoNakashima/items/354ebd4ceee90bf01696

その部分について、本来はAngularが用意をしている「NgFormを用いるべきだろう」と感じたので、その方法での実装へ変えました。

おそらく、これが一般的なやり方なのではないかと考えています。

ゴール

・無理やり用意した投稿フォームを、NgFormを用いた形へ書き換える

やったこと

・以下２つのページを参考にNgFormへの書き換えを行う
https://angular.jp/guide/forms
https://angular.jp/api/forms/NgForm

詰まったこと

・model.contents , model.fileに値が入らなかった

　→ name属性を定義していなかったため。

　　以下の２つは必須です。

　　　・"ngForm"を読み込ませる

　　　・name属性を定義する

以下、before・afterのソースコード

【before】

content-main.component.html

<div class="home-tweet-box tweet-box-component tweet-user"> 
    <input class="tweet-input" [(ngModel)]="newTweetContents" placeholder="いまどうしてる？"> 
    <button (click)="setTweetContents(newTweetContents)">ツイート</button> 
    <input type='file' accept="image/*" (change)="onChangeInput($event)"> 
</div> 
<img [src]=imageSrc alt="" /> 

content-main.component.ts

imageSrc = ''; 
reader = new FileReader(); 
 
onChangeInput(evt) { 
 const file = evt.target.files[0]; 
 this.reader.onload = ((e) => { 
   this.imageSrc = e.target['result']; 
 }); 
 this.reader.readAsDataURL(file); 
} 

【after】

content-main.component.html

<app-tweet-form></app-tweet-form> 

tweet-form.component.html

<div class="timeline-tweet-box"> 
  <div class="home-tweet-box tweet-box-component tweet-user"> 
    <form (ngSubmit)="onSubmit()" #tweetForm="ngForm"> 
      <div class="form-group"> 
        <input type='text' class="tweet-input form-control" [(ngModel)]="model.contents" #contents="ngModel" name="contents" placeholder="いまどうしてる？"> 
        <label class='choice-image'> 
          + 
          <input type='file' class="form-control" accept="image/*" [ngModel]="model.file" #file="ngModel" name="file"  (change)="onChangeInput($event)" style="display:none;"> 
        </label> 
        <button type='submit' class="tweet-button" (click)="setTweetContents(); tweetForm.reset()">ツイート</button> 
      </div> 
    </form> 
  </div> 
  <div *ngIf="fileUrl" class="preview-image"> 
    <img [src]=fileUrl alt="" /> 
  </div> 
</div> 

tweet-form.component.ts

model = new TweetContents(1, '@Taka', '' , ''); 
  reader = new FileReader(); 
  fileUrl = ''; 
  submitted = false; 
 
  constructor(private tweetContentsService: TweetContentsService) { } 
 
  ngOnInit() { 
  } 
 
  onSubmit() { this.submitted = true; } 
 
  setTweetContents(): void { 
    if (this.model.contents) { 
      this.tweetContentsService.setTweetContents(this.model.contents, this.fileUrl); 
      this.prepareNewTweet(); 
    } 
  } 
 
  private prepareNewTweet() { 
    this.model = new TweetContents(1, '@taka', '', ''); 
  } 
 
  onChangeInput(evt) { 
    const file = evt.target.files[0]; 
    this.reader.onload = ((e) => { 
      this.fileUrl = e.target['result']; 
    }); 
    this.reader.readAsDataURL(file); 
  } 

まとめ

きれいになったと思われる。

読んでいただいて、ありがとうございました。