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

Question

我想做以下事情：

<button mat-icon-button color="primary" matTooltip="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!')
            }
        });
        }
    }">
    <mat-icon>call_merge</mat-icon>
</button>

如您所见，我这里只有一个按钮和 sweetalert2 东西。当用户按下按钮时，会出现一个 window 和一个文本框。此文本字段必须包含至少 3 个字符，否则用户将看到来自 sweetalert 的错误消息。

问题是：Angular 编译器对 inputValidator 不满意。编译器总是说 inputValidator 的 lambda 表达式中某处缺少括号。但是，如果我删除 inputValidator，代码会起作用。

我也试过单独定义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>

具有验证功能

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" [swal]="MergeSwal">
     <mat-icon>call_merge</mat-icon>
</button>

在这种情况下，sweetalert window 显示正确，但验证器不起作用。 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" (click)="merge()">
    <mat-icon>call_merge</mat-icon>
</button>

在这种情况下，除 .css 类外，一切正常。显示必要的错误消息，但 Angular 编译器显然没有看到 .ts 文件中定义的任何 .css 类。结果，sweetalet window 以标准 .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

Answer 2

在组件中 html

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

<swal #MergeSwal  

      // all other options 

      [inputValidator]="mergeSwalValidator" >
</swal>

在组件中

public mergeSwalValidator(value: string): string | null {
    if (value.length >= 3) {
          return null;
    } else {
          return 'The description should be at least 3 characters!';
    }
}

Answer 3

/**
 * Validate Swal Component to make sure
 * reason is required before submitting
 *
 * @param {string} value
 * @returns {Promise<string | null>}
 */
requiredReason = (value) => {
  return new Promise(resolve => resolve(value ? null : 'You need to write something!'));
}

<swal #deleteMultipleSwal 
      title="Enter Reason" 
      input="textarea" 
      [inputValidator]="requiredReason" 
      inputPlaceholder="Nothing" 
      [showCancelButton]="true"
      [text]="'Only items created in the last 2 hours will be deleted'"
      [focusCancel]="true" 
      (confirm)="enqueueMultipleDeletions($event)">
</swal>

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

How to use the InputValidator from sweetalert2 within angular 6 project?

html

sweetalert

angular

sweetalert2

在组件中 html

在组件中