Come aggiungere un modello di convalida del modulo in Angular 2?

Ho una forma semplice che deve essere convalidata se l’inizio e la fine dell’input non è lo spazio.

In HTML5, lo farò:

 

Qual è la proprietà giusta per il modello di convalida nella nuova direttiva Angular 2 ngControl? L’API Beta ufficiale è ancora carente di documentazione su questo problema.

Ora, non è necessario utilizzare FormBuilder e tutte queste complicate cose angolari di valenza. Ho messo più dettagli da questo (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526

Esempio da repo:

  

Lo collaudo e funziona 🙂 – ecco il mio codice:

 
...

AGGIORNAMENTO giugno 2017

Voglio solo dire che attualmente quando ho più esperienza, di solito uso il seguente approccio “economico” alla convalida dei dati:

La validazione è SOLO dal lato server (non in modo angular!) E se qualcosa non va, il server (Restful API) restituisce qualche codice di errore, ad es. HTTP 400 e successivo object json nel corpo della risposta (che in angular metto a variabile err ):

 this.err = { "capacity" : "too_small" "filed_name" : "error_name", "field2_name" : "other_error_name", ... } 

(se l’errore di convalida della restituzione del server in formato diverso, di solito è ansible mapparlo facilmente alla struttura precedente)

Nel template html uso tag separato (div / span / small ecc.)

  {{ translate(err.capacity) }} 

Come vedi, quando c’è un errore nella “capacità”, i tag con traduzione degli errori (nella lingua dell’utente) saranno visibili. Questo approccio ha i seguenti vantaggi:

  • è molto semplice
  • in angular non raddoppiamo il codice di validazione che è (e deve essere) nel server (in caso di validazione di regexp questo può prevenire o complicare gli attacchi di ReDoS )
  • abbiamo il pieno controllo sul modo in cui l’errore verrà mostrato all’utente (qui come egzample in tag)
  • poiché nella risposta del server restituiamo error_name (invece del messaggio di errore diretto), possiamo facilmente cambiare il messaggio di errore (o tradurlo) modificando solo il codice frontend-angular (o i file con le traduzioni). Quindi in quel caso non abbiamo bisogno di toccare il codice backend / server.

Ovviamente a volte (se necessario, ad esempio retypePassword, campo che non viene mai inviato al server) Faccio eccezioni all’approccio precedente e this.err alcune convalide in angular (ma uso un simile meccanismo ” this.err ” per mostrare errori (quindi non uso attributo pattern direttamente nel tag di input ma piuttosto eseguo la conferma regexp in alcuni metodi component dopo che l’utente ha generato un evento appropriato come input-change o save).

Dalla versione 2.0.0-beta.8 (2016-03-02), Angular ora include un Validators.pattern regex Validators.pattern.

Vedi il CHANGELOG

Puoi compilare il modulo utilizzando FormBuilder in quanto ti consente un modo più flessibile di configurare il modulo.

 export class MyComp { form: ControlGroup; constructor(@Inject()fb: FormBuilder) { this.form = fb.group({ foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)] }); } 

Quindi nel tuo modello:

  
Please correct foo entry !

Puoi anche personalizzare la class CSS ng-invalid.

Poiché in realtà non esiste alcun validatore per la regex, devi scrivere il tuo. È una funzione semplice che prende un controllo in input e restituisce null se valido o StringMap se non valido.

 export class MyValidators { static regex(pattern: string): Function { return (control: Control): {[key: string]: any} => { return control.value.match(pattern) ? null : {pattern: true}; }; } } 

Spero che ti aiuti.

convalida personalizzata passo dopo passo

Modello HTML

  
field is required.
Special Characters are not Allowed

Componente App.ts

 import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common'; import {CustomValidator} from '../../yourServices/validatorService'; 

sotto la class definire

  demoForm: ControlGroup; constructor( @Inject(FormBuilder) private Fb: FormBuilder ) { this.demoForm = Fb.group({ spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])), }) } 

sotto { ../../yourServices/validatorService.ts }

 export class CustomValidator { static specialCharValidator(control: Control): { [key: string]: any } { if (control.value) { if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) { return null; } else { return { 'invalidChar': true }; } } } } 

La mia soluzione con Angular 4.0.1: mostra solo l’interfaccia utente per l’input CVC richiesto – dove il CVC deve essere esattamente a 3 cifre:

  
... CVC is required. CVC must be 3 numbers. ...