Firmare online con Angular

In un progetto che sviluppando, devo permettere agli utenti di firmare online.

In questo modo posso evitare tutti i vari pezzi di carta.

Vediamo come aggiungere un modulo del genere in Angular!

Ovviamente vedremo solo la parte client; tutta la parte del salvataggio della firma lato server non rientra nell'articolo.

Cominciamo installando una dipendenza:

$ npm install angular2-signaturepad --save

Ci sono altre librerie a disposizione in giro; io ho provato questa e mi ha funzionato bene.

Dopo l'installazione dobbiamo importarlo nel file app.module.ts:

.....
import {SignaturePadModule} from 'angular2-signaturepad';

@NgModule({
    imports: [
        .....
        SignaturePadModule
    ],
    declarations: [
        .....
    ],
    providers: [
        .....
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

Ho omesso tutte le parti che sono già nel file.

Questo il codice Typescript del mio componente:

import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {AppBreadcrumbService} from '../../app.breadcrumb.service';
import {SignaturePad} from 'angular2-signaturepad';

@Component({
    selector: 'app-cliente',
    templateUrl: './cliente.component.html',
    styleUrls: ['./cliente.component.scss']
})

export class ClienteComponent implements OnInit, AfterViewInit {

    @ViewChild(SignaturePad) signaturePad: SignaturePad;

    signaturePadOptions: object = {
        minWidth: 2,
        canvasWidth: 700,
        canvasHeight: 300
    };

    constructor(
        private breadcrumbService: AppBreadcrumbService
    ) { }

    ngOnInit(): void {
        this.breadcrumbService.setItems([
            {
                label: 'Nuovo cliente'
            },
        ]);
    }

    ngAfterViewInit(): void {
        this.signaturePad.set('minWidth', 2);
        this.signaturePad.clear();
    }

    // SIGNATURE
    drawComplete() {
        console.log(this.signaturePad.toDataURL());
    }

    drawStart() {
        console.log('A ME NON SERVE');
    }

    clearSignature() {
        this.signaturePad.clear();
    }

    savePad() {
        console.log(this.signaturePad.toDataURL());
    }

}

Abbiamo implementato anche l'interfaccia AfterViewInit, in quanto abbiamo messo delle impostazioni da richiamare nel metodo ngAfterViewInit; mettendole nel metodo ngOnInit otterremmo errore.

Alla fine mandiamo in console la stringa BASE64 dell'immagine; questa stringa vi servirà poi lato server per creare l'immagine (potete guardare questo articolo).

Questa la parte HTML:

<div class="p-grid">
    <div class="p-col-12 p-card_firma">
        <!-- SIGNATURE -->
        <p-card header="Firma qui">
            <div class="signature-container">
                <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()"
                               (onEndEvent)="drawComplete()"></signature-pad>
            </div>

            <div class="p-field p-col-12 p-text-center">
                <div class="p-grid">
                    <div class="p-col-6">
                        <button pButton type="button" label="Pulisci firma"
                                (click)="clearSignature()"></button>
                    </div>
                    <div class="p-col-6">
                        <button pButton type="button" label="Salva firma" (click)="savePad()"></button>
                    </div>
                </div>
            </div>
        </p-card>
    </div>
</div>

Come vedete molto semplice.

Infine due regole CSS (che a voi potrebbero non servire):

.signature-container {
  border-style: dashed;
  border-width: 1px;
  margin-bottom: 20px;
  background-color: grey;
}

Giusto per dare un pò di colore e indicare dove firmare.

Enjoy!