Блог

Главная - Вопросы по программированию - Как использовать InputValidator из sweetalert2 в проекте angular 6?

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

#html #angular #sweetalert #sweetalert2

#HTML #angular #sweetalert #sweetalert2

Вопрос:

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

 <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. Когда пользователь нажимает кнопку, появляется окно с текстовым полем. Это текстовое поле должно содержать не менее 3 символов, в противном случае пользователь увидит сообщение об ошибке от sweetalert.

Проблема в том: Компилятор Angular недоволен 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(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 отображается правильно, но средство проверки не работает. По 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, очевидно, не видит никаких .css классов, определенных в .ts файле. В результате отображается окно sweetalet со стандартными .css классами.

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

Комментарии:

1. Пожалуйста, создайте один stackblitz вашего кода.

2. Готово: stackblitz.com/edit/angular-ckhee3 В app.component.html , удалить все, начиная со строки 25 и заканчивая строкой 35 включительно. Я оставил этот код InputValidator в файле, чтобы показать, что компилятору не хватает некоторых круглых скобок. Работает только код, связанный с третьим ключом. Однако там используются только стандартные классы .css. Мой проект использует свои собственные классы .css, которые включены в качестве модуля узла.

Ответ №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

Ответ №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>

В компоненте ts

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

Ответ №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>