角：表单验证工作不

Question

我已经要求标题形式，显示&图片字段是强制性的提交表单。我能验证“标题” &“显示”领域，但“图像”字段未得到验证禁用提交按钮。

我试图用管，如“！heroForm.form.valid || togglefile”验证的形式，但它不工作。任何帮助都会很棒。下面是我的参考代码：

表：

<div class="row innerpage"> 
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm"> 
    <div class="form-group col-xs-6"> 
     <label for="newstitle">News Title (Required):</label> 
     <input type="text" class="form-control" [(ngModel)]="news.newstitle" id="newstitle" name="newstitle" required #newstitle="ngModel"/> 
     <div [hidden]="newstitle.valid || newstitle.pristine" class="alert alert-danger"> 
      News Title is required 
     </div> 
    </div>     

    <div class="form-group col-xs-6"> 
     <label for="display">Display (Required):</label><br> 
     <ss-multiselect-dropdown [options]="myOptions" [(ngModel)]="optionsModel" (ngModelChange)="onChange($event)" [texts]="myTexts" [settings]="mySettings" name="display" required #display="ngModel"></ss-multiselect-dropdown>   
     <div [hidden]="display.valid || display.pristine" class="alert alert-danger"> 
      Display is required 
     </div> 
    </div>   

    <div class="form-group col-xs-6"> 
      <label for="formData">News Image:</label> 
      <input #fileInput type="file" id="formData" name="formData" multiple="true" (change)="fileChange($event)" required> 
    </div>    

    <div class="form-group col-xs-12"> 
     <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid || togglefile">Add</button> 
    </form> 
</div> 

组件：

export class NewsAddComponent { 
    @ViewChild('fileInput') fileInput:ElementRef; 
fileList; 
togglefile: boolean; 

ngOnInit() { this.getNewss() } 

    getNewss() { 
    this.togglefile = true; 
    } 

fileChange(event) { 
    this.fileList = event.target.files; 
    console.log(this.fileList); 
    console.log(this.fileList.length); 
    if (this.fileList.length == 0) { 
     this.togglefile == true; 
    } else if (this.fileList.length > 0) { 
     this.togglefile == false; 
    } 
    } 
} 

Answer 1

的问题是，不是分配（使用=）true/false值为togglefile变量，你比较它（使用==）。

为了解决这个问题，这样做：

fileChange(event) { 
    this.fileList = event.target.files; 
    if (this.fileList.length == 0) { 
    this.togglefile = true; 
    } else if (this.fileList.length > 0) { 
    this.togglefile = false; 
    } 
} 

甚至更​​好：

fileChange(event) { 
    this.fileList = event.target.files; 
    this.togglefile = this.fileList.length === 0; 
}