Angular: タイムスケジュール＆ファイルアップロードを設置する

管理や予約系のアプリにもよく使われてる！

イメージ

コンポーネントの中のHTML

<div class="container">
  <div style="margin-right:10px;">
　　// ラベル名
    <label for="scheduleDate">Schedule Date:</label>
   // スケジュール
    <input
      type="date"
      id="scheduleDate"
      name="scheduleDate"
      [(ngModel)]="scheduleDate"
    />
  </div>

  <div>
　　// ラベル名
    <label for="scheduleTime">Schedule Time:</label>
　　// タイム
    <input
      type="time"
      id="scheduleTime"
      name="scheduleTime"
      [(ngModel)]="scheduleTime"
      style="padding-bottom: 10px;"
    />
  </div>
</div>

<div>
  //　アップロードファイル
  <form (ngSubmit)="onSubmit()">
  <input type="file" (change)="handleFileInput($event)" />
  <button style="padding: 15px 35px;" type="submit">Upload</button>
  </form>
</div>

コンポーネントの中のTypescript

export class 作ったコンポーネント名Component {

  selectedFile: File | null = null;
  scheduleDate: string = '';
  scheduleTime: string = '';

  handleFileInput(event: any) {
    this.selectedFile = event.target.files[0];
  }

  onSubmit() {
    console.log('Scheduled date:', this.scheduleDate);
    console.log('Scheduled time:', this.scheduleTime);
    console.log('Selected file:', this.selectedFile);

    if (this.selectedFile) {
      // ファイルのアップロード処理を実装する
      console.log('Selected file:', this.selectedFile);
    } else {
      console.log('No file selected.');
    }
  }

}

src / app / app.module.ts

// 他のimportがある中の下に追加
import { FormsModule } from '@angular/forms';

// 他のModuleがある中のとりあえず下に追加
@NgModule({
  imports: [
    FormsModule,
],

テンプレだから
シンプルですがCSSやSCSSを使ってデザインでちがう感じに
カスタマイズするのがオススメ！