adding custom input to swal component

[yesimd]

Hi,

I am using ngx-sweetalert in my project and I have more than one input which need validation before confirmation. I used preConfirm input but the problem is after clicking to confirm button if validation fails error message is not ressetted even enter valid inputs until hit the confirm button again. So I need to add a customized input like [preConfirm] to swal component to reset error message if validation pass. I How can I add new input to ngx-sweetalert2 library. Thanks for your help.

[toverux]

Hi,

You can add multiple inputs using a custom content with *swalPortal (see README). Then in preConfirm, you'll have to read the contents of the inputs manually. One of the possible ways to obtain the value of you inputs is:

<swal>
    <ng-container *swalPortal>
        <input [(ngModel)]="myVar">
    </ng-container>
</swal>

export class MyComponent() {
    public myVar: string;
}

Finally, you can control the validation message visibility and content with :

Swal.showValidationMessage(message) | Show the validation message DOM node. Swal.resetValidationMessage() | Hide the validation message DOM node. Swal.getValidationMessage() | Get the validation message DOM node.

Get a reference to sweetalert2 (Swal above) with :

import { SweetAlert2LoaderService } from '@sweetalert2/ngx-sweetalert2';

@Component({})
export class AppComponent {
    public constructor(private readonly sweetAlert2Loader: SweetAlert2LoaderService) {
    }

    public async doSomething() {
        const swal = await this.sweetAlert2Loader.swal;
        swal.xxx();
    }
}