我在动态表单中输入了类型文件,如果用户上传了其他文件格式,则自动提交按钮将被禁用。
kyc.component.ts
handleFileInput(files: FileList, label: string): void {
this.fileToUpload = files.item(0);
if ((this.fileToUpload.type === 'image/bmp' && this.fileToUpload.size <= 10000000)
|| (this.fileToUpload.type === 'application/msword'&& this.fileToUpload.size <= 10000000)) {
this.uploadFile(this.settingService.uploadFile(), this.fileToUpload, label);
this.submitButton.nativeElement.disabled = false;
} else {
this.submitButton.nativeElement.disabled = true;
this.notiService.printErrorMessage(MessageContstants.CHECK_FILE);
}
}
kyc.component.html
<input *ngIf="field.type.name == fieldTypeNames.File" class="full-width" (change)="handleFileInput($event.target.files, field.label)"
[(ngModel)]="data[field.label]" name="field.label" type="File" placeholder="{{field.description}}" accept=".jpeg, .jpg, .gif, .png, .bmp, .docx, .doc, .pdf," required
/>
<mat-form-field class="w-100" *ngIf="field.type.name == fieldTypeNames.Dropdown">
<mat-select [(ngModel)]="data[field.label]" name="{{field.label}}">
<mat-option *ngFor="let option of field.description" [value]="option">{{option}}</mat-option>
</mat-select>
</mat-form-field>
<input *ngIf="field.type.name == fieldTypeNames.Photo" class="full-width" (change)="handleFileInput($event.target.files, field.label)" [(ngModel)]="data[field.label]"
name="field.label" type="File" accept=".jpeg, .jpg, .gif, .png, .bmp, .docx, .doc, .pdf," required />
<div *ngIf="field.type.name == fieldTypeNames.Photo" class="full-width pt-3" [innerHTML]="field.description | htmlSanitizer"></div>
</div>
</div>
<div class="submit-button">
<button #submitButton class="primary-button" (click)="submitKyc()" [disabled]="isButtonClicked">Submit</button>
</div>
我尝试禁用提交按钮,在my form中有四个输入type ='file',其中一个是不同的文件格式(已禁用),但是提交按钮仍处于启用状态。