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