动态形式角度为6的禁用按钮

时间:2019-01-24 07:01:16

标签: typescript file-upload angular6 dynamicform

我在动态表单中输入了类型文件,如果用户上传了其他文件格式,则自动提交按钮将被禁用。

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',其中一个是不同的文件格式(已禁用),但是提交按钮仍处于启用状态。

0 个答案:

没有答案