Как использовать InputValidator из sweetalert2 в рамках проекта angular 6? - PullRequest
Новая
       17

Как использовать InputValidator из sweetalert2 в рамках проекта angular 6?

0 голосов
/ 11 апреля 2019

Я хочу сделать следующее: 

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

Как видите, у меня есть одна кнопка и подсластитель2.Когда вы нажимаете кнопку, появляется окно с текстовым полем.Это текстовое поле должно содержать не менее 3 символов, в противном случае пользователь увидит сообщение об ошибке от sweetalert.

Проблема в следующем: угловой компилятор недоволен inputValidator.Компилятор всегда говорит, что где-то в лямбда-выражении inputValidator отсутствует скобка.Однако, если я удаляю этот материал 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 

 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>

В этом случае окно подсвечивания отображается правильно, но средство проверки не работает.Функция 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 явно не видит классов .css, определенных в файле .ts.В результате в окне со сладостями отображаются стандартные классы .css.

Может кто-нибудь мне помочь?Какой самый простой способ заставить inputValidator работать правильно?

1 Ответ

0 голосов
/ 11 апреля 2019

Я решил проблему следующим образом:

В моем файле .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

...