Come aggiungere la convalida del modulo modello Angolare 2?

Ho un semplice form che deve convalidare l’inizio e la fine dell’input è spazio.

In HTML5, farò questo:

<input type="text" pattern="^(?!\s|.*\s$).*$">

Che cosa è il diritto di proprietà per la convalida del modello nel nuovo Angolare 2 ngControl direttiva? La Beta ufficiale di API, manca ancora la documentazione relativa a questo problema.

  • Attualmente non vi è alcun modo semplice per farlo. È possibile scrivere il proprio custom validator fino a questo richiesta di pull terre, se non a tutti.
  • Qui è un esempio di come effettuare la convalida personalizzata se si va questa strada syntaxsuccess.com/viewarticle/…
InformationsquelleAutor Downhillski | 2016-01-01



6 Replies
  1. 49

    Ora, non c’è bisogno di usare FormBuilder e tutto questo complicato valiation angolare roba. Ho messo più dettagli da questo (Angolare 2.0.8 – 3march2016):
    https://github.com/angular/angular/commit/38cb526

    Esempio da repo :

    <input [ngControl]="fullName" pattern="[a-zA-Z ]*">

    I test e funziona 🙂 – ecco il mio codice:

    <form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
    ...
    <input 
      id='room-capacity' 
      type="text" 
      class="form-control" 
      [(ngModel)]='room.capacity' 
      ngControl="capacity" 
      required
      pattern="[0-9]+" 
      #capacity='ngForm'>

    Approccio alternativo (AGGIORNAMENTO giugno 2017)

    Di convalida è SOLO sul lato server. Se c’è qualcosa di sbagliato quindi il server restituire un codice di errore e.g HTTP 400 e il seguente oggetto json in risposta corpo (come esempio):

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

    Nel modello html io uso tag separato (div/span/piccolo etc.)

    <input [(ngModel)]='room.capacity' ...>
    <small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

    Se in “capacità” è un errore quindi per il tag msg traduzione sarà visibile. Questo approccio hanno i seguenti vantaggi:

    • è molto semplice
    • evitare di backend codice di convalida duplicazione su frontend (per regexp validazione questo può prevenire o complicare Ripristini attacchi)
    • controllo sul modo in cui l’errore viene visualizzato (ad esempio, <small> tag)
    • backend ritorno error_name che è facile da tradurre in un linguaggio appropriato in frontend

    Naturalmente, a volte mi fanno eccezione se la convalida è necessaria sul lato frontend (es. retypePassword campo della registrazione è mai inviare al server).

    • Mi limito a verificare (e test) changelog parlare di Chris Snowden nella sua precedente risposta. Lui darà il principale suggerimento.
    • Qual è la formula per convertire i modelli di questo nuovo tipo? ad esempio : ng-pattern=”/^(\+\91{1,2})\d{10}$/”
    • Non capisco la domanda, potrebbe ripetere con altre parole ?
    • Quando io uso espressioni regolari stringa che funziona angolare 1.x come modello, in Angular2, non funziona. Perché?
    • rimuovere ‘/’ all’inizio e annuncio la fine regexp. così dovrebbe essere nel tuo caso: modello=”^(\+\91{1,2})\d{10}$” (può essere che si deve rimuovere o modificare i backslash ‘\’ in regexp)
    • Grazie ora funziona.
    • Io sono ancora alla ricerca di una FormBuilder in Molti Esempi e Documenti. mi potete aiutare con qualsiasi documento senza FormBuilder per favore?
    • perché senza FormBuilder? Non è necessario utilizzare il form builder. È possibile aggiungere la convalida dopo ogni carattere (lo si fa da ingresso attributte (cambia)=”validate($event)” ) e in funzione di convalidare in Dattiloscritto di controllo e di regexp mostrare o nascondere qualche messaggio di errore in te modello
    • Utilizzando questo metodo, come si fa a impostare il messaggio di errore?
    • Puoi provare questo (ma io non check it) : stackoverflow.com/questions/10361460/…
    • potete per favore aiutarmi a risolvere questo stackoverflow.com/questions/52091334/… @KamilKiełczewski

  2. 8

    Si potrebbe costruire la vostra forma utilizzando FormBuilder che permetta più flessibile per configurare il modulo.

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

    Quindi nel modello :

    <input type="text" ngControl="foo" />
    <div *ngIf="!form.foo.valid">Please correct foo entry !</div> 
    

    È inoltre possibile personalizzare ng-non valida classe CSS.

    Come in realtà non c’è validatori per regex, dovete scrivere il vostro proprio. Si tratta di una semplice funzione che prende un controllo in ingresso e restituisce null se valido o un 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};
        };
      }
    }
    

    Speranza che possa aiutare.

  3. 5

    di validazione personalizzati passo passo

    Modello Html

      <form [ngFormModel]="demoForm">
      <input  
      name="NotAllowSpecialCharacters"    
      type="text"                      
      #demo="ngForm"
      [ngFormControl] ="demoForm.controls['spec']"
      >
    
     <div class='error' *ngIf="demo.control.touched">
       <div *ngIf="demo.control.hasError('required')"> field  is required.</div>
       <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
     </div>
      </form>
    

    Componente App.ts

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

    in classe
    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 };
           }
       }
    
     }
    
     }
    
  4. 1

    La mia soluzione Angolare con 4.0.1: Solo mostrando l’interfaccia utente per la richiesta di CVC ingresso – dove il CVC deve essere esattamente 3 cifre:

        <form #paymentCardForm="ngForm">         
    ...
            <md-input-container align="start">
                <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
                <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
                    <span [hidden]="!cvc2.errors.required && cvc2.dirty">
                        CVC is required.
                    </span>
                    <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
                        CVC must be 3 numbers.
                    </span>
                </md-hint>
            </md-input-container>
    ...
    <button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
    </form>
    

Lascia un commento