如何在angular 6项目中使用sweetalert2的InputValidator？

Question

我想做以下事情：

<button mat-icon-button color="primary"
          matTooltip="Merge batches"
          [swal]="{
            title: 'Are you sure?',
            input: 'text', inputPlaceholder: 'Please type the description in',
            type: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'Cancel',
            confirmButtonClass: 'btn btn-primary',
            cancelButtonClass: 'btn btn-outline-primary',
            inputValidator: (value) => {
              return new Promise((resolve) => {
              if (value.length >= 3) {
                resolve();
              } else {
                resolve('The description should be at least 3 characters!')
              }
            });
            }

          }">
          <mat-icon>call_merge</mat-icon>
        </button>

正如你所看到的，我在这里有一个按钮和sweetaler2-stuff。按下按钮时，会出现一个带有文本框的窗口。此文本字段必须至少包含3个字符，否则用户将看到来自sweetalert的错误消息。

问题是：Angular编译器对inputValidator不满意。编译器总是说inputValidator的lambda表达式中的某个地方缺少一个括号。但是，如果我删除了这个inputValidator-stuff，那么代码就可以很好地工作。

我还尝试分别定义swal组件，例如

<swal
        #MergeSwal
        title="Are you sure?"
        type="warning"
        input="text"
        inputPlaceholder="Please type the description in"
        [showCancelButton]="true"
        confirmButtonText="Yes"
        cancelButtonText="Cancel"
        confirmButtonClass="btn btn-primary"
        cancelButtonClass="btn btn-outline-primary"
        (inputValidator)="validate($event)">
        </swal>

with validate-function

 validate(event) {
    console.log('It works');
    return new Promise((resolve) => {
      if (event.length >= 3) {
        resolve();
      } else {
        resolve('The description should be at least 3 characters!')
      }
      });
  }

并使用按钮的代码

<button mat-icon-button color="primary"
          matTooltip="Merge batches" [swal]="MergeSwal">
          <mat-icon>call_merge</mat-icon>
        </button>

在这种情况下，sweetalert窗口正确显示，但验证器不起作用。由于某种原因，不执行validate（）函数。

我也尝试了下面的事情：我定义了这个函数

merge() {
    swal({
      title: 'Are you sure?',
      input: 'text',
inputPlaceholder: 'Please type the description in',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes',
      cancelButtonText: 'Cancel',
      confirmButtonClass: 'btn btn-primary',
      cancelButtonClass: 'btn btn-outline-primary',
      inputValidator: (value) => {
        return new Promise((resolve) => {
        if (value.length >= 3) {
          resolve();
        } else {
          resolve('The description should be at least 3 characters!')
        }
        });
    }
    });
  }

然后在按下按钮时调用此功能

<button mat-icon-button color="primary" 
          matTooltip="Merge batches" (click)="merge()">
          <mat-icon>call_merge</mat-icon>
        </button>

在这种情况下，除了.css类之外，一切都运行良好！显示必要的错误消息，但Angular编译器显然没有看到.ts文件中定义的任何.css类。结果，sweetalet窗口显示标准的.css类。

谁能帮助我？强制inputValidator正常工作的最简单方法是什么？

Answer 1

我解决了这个问题如下：

在我的.ts文件中：

import { SwalComponent } from '@toverux/ngx-sweetalert2';
...
@ViewChild('mergeDialogSwal') private mergeDialogSwal: SwalComponent;
...
mergeDialogValidator(): void {
    if (this.mergeDialogSwal === undefined) { return; }
    this.mergeDialogSwal.inputValidator = (value) => {
      return new Promise((resolve) => {
        if (value.length >= 3) {
          resolve();
        } else {
          resolve('The description should be at least 3 characters!');
        }
      });
    };
  }

在我的.html文件中：

<swal #mergeDialogSwal 
      title="Do you really want to merge the batches?"
      text="You can not undo this action!"
      type="warning"
      input="text"
      inputPlaceholder="Specify a description for the merged batch" 
      [showCancelButton]="true"
      confirmButtonText="Yes, merge"
      cancelButtonText="Cancel"
      confirmButtonClass="btn btn-primary"
      cancelButtonClass="btn btn-outline-primary" 
      [inputValidator]="mergeDialogValidator()"
      (confirm)="mergeBatches()">
</swal>
...
     <button (click)="mergeDialogSwal.show()">Click Me</button>

也许这个解决方案并不是很好，但我没有其他想法。如果有人可以提出替代的，更好的解决方案，我会很高兴。

Stackblitz：https://stackblitz.com/edit/angular-xhdv9z