Angular: Form Validation funktioniert nicht

Question

Ich habe ein Formular, das erfordert die Titel, Display & Bild Felder für die Übermittlung des Formulars obligatorisch sein. Ich bin in der Lage, die "Titel" & "Anzeige" -Felder zu validieren, aber das "Bild" -Feld wird nicht validiert, um die Übermittlungsschaltfläche zu deaktivieren.

Ich versuche, Pipe wie "! HeroForm.form.valid || Togglefile" zu verwenden, um das Formular zu überprüfen, aber es funktioniert nicht. Jede Hilfe wird großartig sein. Unten ist mein Code als Referenz:

Form:

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

Komponente:

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

Das Problem ist, dass anstelle der Zuweisung (mit =) true/falseWert für togglefileVariable, du bist vergleicht es (unter Verwendung ==).

es zu lösen, wie dies tun:

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

Oder noch besser:

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