Angular JS：当两个条件都为假时，按钮不会被禁用

Question

我有一个相对微不足道的问题

特别是，如果用户没有上传文件和添加评论，我有一个按钮将保持禁用状态。

现在，我的工作流程是这样的

1. 用户添加一个文件
2. 用户添加评论（将文本输入文本区域）
3. 确定按钮已启用，用户点击确定

现在我注意到如果我以不同的顺序进行事件

1. 用户输入评论
2. 确定按钮启用

基本上如果用户做的第一件事是写评论，那么按钮就会启用。

我不想要这种行为，因为用户必须始终上传文件，我该如何解决这个问题

这是我的 HTML

 <div mat-dialog-actions align="end">
    <button mat-raised-button color="primary" cdkFocusInitial (click)="onNoClick()">Cancel</button>
    <button mat-raised-button color="accent" [mat-dialog-close]="true" [disabled]="isValidComment == false && fileUploaded == false">Ok</button>
  </div>

<div class="row">
        <mat-form-field class="full-width">
          <mat-label>Description</mat-label>
          <textarea matInput [(ngModel)]="this.dataTransactionService.localDataTransaction.comments" (ngModelChange)="onCommentsChange()" placeholder="Comments"></textarea>
        </mat-form-field>

      </div>

我的代码：

     onCommentsChange(){
    this.isValidComment = false;
    const currentComments = this.localDataTransaction.comments;
    if (currentComments !== undefined && currentComments !== this.previousComments){
      this.previousComments = currentComments;
      if (!currentComments.replace(/\s/g, '').length){
        this.isValidComment = false;
      }else{
        this.isValidComment = true;
      }
      console.log('Is valid,',this.isValidComment);
    }
 }


 uploadFile(file) {
const formData = new FormData();
formData.append('file', file.data);
file.inProgress = true;
this.uploadService.upload(formData).pipe(
  map(event => {
    switch (event.type) {
      case HttpEventType.UploadProgress:
        file.progress = Math.round(event.loaded * 100 / event.total);
        break;
      case HttpEventType.Response:
        return event;
    }
  }),
  catchError((error: HttpErrorResponse) => {
    console.log(`Response: ${error.message}`);
    console.log(typeof (error));
    file.inProgress = false;
    this.dialogRef.close();
    this.dialog.open(ErrorDialogComponent,
      {
        width: '800px',
        data: {
          title: 'Unexpected Server Error',
          message: 'The ALGO Data Service threw an unexpected error. Please contact the tech team to check Algo Data Service logs.'
        },
        panelClass: 'error-dialog-class'
      });

    return of(`${file.data.name} upload failed.`);
  }))
  .subscribe((response: any) => {
    console.log(response);
    if (typeof (response) == 'object') {
      console.log(response.body);

      if (response.body.success) {
        this.dataTransactionService.localDataTransaction.idx= response.body.uploadIdentifier;
        console.log(`uploadIdentifier: ${this.localDataTransaction.idx}`);
        this.uploadFileName = file.data.name;
        this.fileUploaded = true;
      } else {
        console.log('Problem');
      }
    }
  });

}