imports: [
environment.production ? [] : AkitaNgDevtools.forRoot(),
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
]
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="file">File</label>
<input
formControlName="file"
id="file"
type="file"
class="form-control"
(change)="onFileChange($event)">
>
<div*ngIf="f['file'].touched && f['file'].invalid" class="alert alert-danger">
<div*ngIf="f['file'].errors?.['required']">File is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
{{input}}
Componentに読み込む処理を追加
- ファイルの選択時に、選択したファイルをeventオブジェクトから取り出す
- FileReaderのread結果をTemplateに反映している
- 今回は読み出したいCSVがSJISだったのでEncodeを指定している
import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
form = this.fb.group({file: ['', [Validators.required]]});
file: File | null = null;
input = "";
constructor(private fb: FormBuilder) {
}
get f() {
return this.form.controls;
}
ngOnInit() {
}
onFileChange(event: any) {
if (event.target.files.length > 0) {
this.file = event.target.files[0];
}
}
submit() {
this.readAsText(this.file!).then(result => this.input = result);
}
private readAsText(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
resolve(reader.result as string);
};
reader.onerror = () => {
reject(reader.error);
};
reader.readAsText(file, 'shift-jis');
});
}
}
