Firmare online con Angular

Mattepuffo's logo
Firmare online con Angular

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!


Condividi su Facebook

Commentami!