Question

我有一个表格需要标题，显示＆amp;提交表单必须具有的图像字段。我能够验证＆＃34;标题＆＃34; ＆安培; ＆＃34;显示＆＃34;字段，但＆＃34;图像＆＃34;字段未通过验证以禁用提交按钮。

我试图像＃34;！heroForm.form.valid ||一样使用管道togglefile＆＃34;验证表单，但它不起作用。任何帮助都会很棒。以下是我的参考代码：

表格：

<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 值，而是指定＆＃39;重新比较（使用==）。

要解决它，请执行以下操作：

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

Angular：表单验证无效

1 个答案: