角：表單驗證工作不

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; 
}