Angular: Form Validation not working

Question

I have a form which requires the Title, Display & Image fields to be mandatory for submitting the form. I'm able to validate the "Title" & "Display" fields but the "Image" field is not getting validated to disable the submit button.

I'm trying to use pipe like "!heroForm.form.valid || togglefile" to validate the form but it doesn't work. Any help will be great. Below is my code for reference:

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>

Component:

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

The problem is that instead of assigning (using = ) true/false value for togglefile variable , you're comparing it (using == ).

To solve it, do like this:

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

Or even better:

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