我有一个被动的表单,其中应该禁用提交按钮,直到填写输入
我已经尝试使用ngmodel和ngForm参数来禁用按钮,但是在填充输入时它没有启用
这是我的代码
<form #uploadForm="ngForm">
<div class="uploadDiv">
<div *ngFor="let data of fileList, let i = index">
<label class="adpLabel">{{data.fileDesc}}</label>
<input readonly class="adpInput" type="text" [(ngModel)]='listFilter' name="listFilter" value={{filename[i]}}>
<input type="file" id="{{data.fileName}}"
#selectFiles hidden accept=".xls,.xlsx" (change)="getFileInfo($event, i)">
<button mat-button (click)="selectFiles.click()" class="browseBtn">Browse</button>
</div>
<div class="adpButtons">
<button mat-button [disabled]="!uploadForm.valid" (click)="clickFileUpload()">Upload</button>
<button mat-button disableRipple tabindex="-1" mat-dialog-close>Back</button>
</div>
</div>
</form>
我希望在输入填充时启用上传按钮
编辑1:添加ts代码
getFileInfo(event, i) {
if(this.file[i]){
this.file.splice(i,1,event.target.files);
this.fileType.splice(i,1,event.target.id);
}
else{
this.file[i]=event.target.files;
this.fileType[i]=event.target.id;
//this.file.push(event.target.files);
//this.fileType.push(event.target.id);
}
for (let j = 0; j < this.file.length; j++) {
let fileName:string='';
let extension:string;
if(event.target.files[j]){
fileName=event.target.files[j].name;
extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
}
let id:any;
if(this.fileType[j]){
id=this.fileType[j];
}
if ( extension==".xls" || extension==".xlsx" ) {
this.filename[i] = fileName;
this.fileType[i] = id;
}
}
}
尝试为输入提供模板变量ie
<input .... #<tempvar name>="ngModel" />
您并没有真正使用Angular Reactive Forms - 或者至少不正确。 https://angular.io/guide/reactive-forms
您可以在.ts文件中定义一个Formgroup和Controls,一个包含.html文件中控件的表单并连接它们。
https://stackblitz.com/edit/angular-reactive-forms?file=app%2Fapp.component.html
.TS
SignupForm: FormGroup;
this.SignupForm = new FormGroup({
'username':new FormControl(null),
'email':new FormControl(null)
});
html的
<form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
<input type="text" formControlName = "username">
</form>
通过此设置,您可以从表单组获取控件并评估其状态
.TS
get controlUsername() {
return this.SignupForm.get('username');
}
html的
<button [disabled]="!controlUsername.valid" type="submit">Submit</button>
而不是NgModel使用FormControlName来验证。供参考:https://angular.io/guide/reactive-forms
如果要检查是否选择了任何文件以允许用户提交请求,请使用fileList的length
进行检查
<button mat-button [disabled]="fileList.length == 0" (click)="clickFileUpload()">Upload</button>
您可以在输入字段上使用必需属性
<input type="file" id="{{data.fileName}}"
#selectFiles hidden accept=".xls,.xlsx" (change)="getFileInfo($event, i)" required>
而且只是一个建议,尝试尽可能多地使用反应形式。与模板驱动的表单相比,它更简单,并且有很多选项。