2
角度フォームの検証に問題があります。角4ファイルアップロードフォームの検証
これは私のフォームcomponent.tsコードです：
<!-- language: lang-type-script -->
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms';
** Image Converter Base64
public base64textString: String = "";
handleFileSelect(evt) {
var files = evt.target.files;
var file = files[0];
if (files && file) {
var reader = new FileReader();
reader.onload = this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(file);
}
}
_handleReaderLoaded(readerEvt) {
this.base64textString = btoa(readerEvt.target.result);
}
** Form Validation
...
photo = new FormControl('', [Validators.required]);
...
** Form Group
internFormStep1: FormGroup = this.fb.group({
...
photo: this.base64textString
});
これは私のフォームcomponent.htmlコードです：
<!-- language: lang-html -->
<form [formGroup]="internFormStep1">
<div class="row">
<fieldset class="form-group col-6 pull-left" [ngClass]="{'has-danger': internFormStep1.get('photo').hasError('required') && internFormStep1.get('photo').touched}">
<label for="photo" class="form-control-label">
Fotoğraf
</label><br>
<label class="btn btn-secondary" for="filePicker">
<input type="file" id="filePicker" style="display:none;" (change)="handleFileSelect($event)" accept="image/jpeg, image/png, image/bmp" class="custom-file-input" [formControl]="internFormStep1.get('photo')"
[ngClass]="{'form-control-danger': internFormStep1.get('photo').hasError('required') && internFormStep1.get('photo').touched}">
Yükle
</label>
<div class="form-control-feedback" *ngIf="internFormStep1.get('photo').hasError('required') && internFormStep1.get('photo').touched">Fotoğraf gerekli</div>
</fieldset>
<div class="form-group col-6 pull-left avatar-lg">
<div *ngIf="base64textString"><img class="img-fluid" src="data:image/jpg;base64,{{base64textString}}" /></div>
</div>
</div>
</form>
私は、フォームからBase64形式に画像を変換します。しかし、そのフォームはそれを受け入れません。これをどうすれば解決できますか？
を？エラーが発生していますか？ – Dekker
私はエラーを出さず、ただ検証します。 – Necip