validation - validacion - validar formulario angular 5

¿Cómo agregar un patrón de validación de formulario en Angular 2?

Question

Tengo un formulario simple que necesita validar si el comienzo y el final de la entrada no es espacio.

En HTML5, haré esto:

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

¿Cuál es la propiedad correcta para el patrón de validación en la nueva directiva Angular 2 ngControl? La API Beta oficial todavía carece de documentación sobre este tema.

Answer 1

Ahora, no necesita usar FormBuilder y todas estas complicadas cosas angulares de validación. Puse más detalles de esto (Angular 2.0.8 - 3march2016): https://github.com/angular/angular/commit/38cb526

Ejemplo de repo:

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

Lo pruebo y funciona :) - aquí está mi código:

<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''>

ACTUALIZACIÓN junio 2017

Solo quiero decir que actualmente, cuando tengo más experiencia, usualmente uso el siguiente enfoque ''barato'' para la validación de datos:

La validación es ÚNICAMENTE del lado del servidor (¡no en absoluto!) Y si algo está mal, el servidor (Restful API) devuelve un código de error, por ejemplo, HTTP 400 y el siguiente objeto json en el cuerpo de respuesta (que en angulo pongo la variable err ):

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

(si el servidor devuelve un error de validación en un formato diferente, entonces generalmente puede asignarlo fácilmente a la estructura anterior)

En la plantilla html utilizo una etiqueta separada (div / span / small etc.)

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

Como puede ver, cuando hay algún error en "capacidad", la etiqueta con traducción de error (al idioma del usuario) será visible. Este enfoque tiene las siguientes ventajas:

• Es muy simple
• en angular no duplicamos el código de validación que está (y debe ser) en el servidor (en el caso de la validación de ReDoS esto puede evitar o complicar los ataques ReDoS )
• tenemos control total sobre la forma en que se mostrará el error al usuario (aquí como egzample en la etiqueta <small> )
• porque en la respuesta del servidor devolvemos error_name (en lugar de mensaje de error directo), podemos cambiar fácilmente el mensaje de error (o traducirlo) modificando solo el código frontend-angular (o archivos con traducciones). Entonces, en ese caso, no necesitamos tocar el código backend / server.

Por supuesto, a veces (si esto es necesario, por ejemplo, el campo retypePassword que nunca se envía al servidor) hago excepciones al enfoque anterior y hago alguna validación en angular (pero uso un mecanismo similar " this.err " para mostrar errores (entonces no uso) atributo de pattern directamente en input etiqueta de input sino que hago la validación de la expresión regular en algún método de componente después de que el usuario eleve el evento apropiado, como el cambio de entrada o el guardado).

Answer 2

Desde la versión 2.0.0-beta.8 (2016-03-02), Angular ahora incluye un Validators.pattern regex Validators.pattern.

Ver el CHANGELOG

Answer 3

Mi solución con Angular 4.0.1: simplemente mostrando la UI para la entrada de CVC requerida, donde el CVC debe tener exactamente 3 dígitos:

    <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>

Answer 4

Puede crear su formulario con FormBuilder ya que le permite una forma más flexible de configurar el formulario.

export class MyComp {
  form: ControlGroup;

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

Luego en tu plantilla:

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

También puede personalizar la clase ng inválida de CSS.

Como en realidad no hay validadores para regex, debes escribir el tuyo propio. Es una función simple que toma un control en la entrada y devuelve nulo si es válido o un StringMap si no es válido.

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

Espero que te ayude

Answer 5

validación personalizada paso a paso

Plantilla 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>

Aplicación de componentes

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

debajo de la clase define

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

en { ../../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 };
       }
   }

 }

 }