reactivos - validar formulario angular 5

Angular2 consigue los validadores existentes de un control de formulario.

Question

Digamos

surname = new FormControl('''', [Validators.required, Validators.minLength(2)]);

En algún momento, dependiendo de la situación, puedo agregar o eliminar cualquier validador en el control de apellidos.

Al final ¿Cómo sé qué validadores existen en el control de apellidos? No pude encontrar nada en la documentación ni descargando el control en la consola

Algo como

surname.getValidators() should return - [''required'', ''minLength'']

Answer 1

Actualmente, los validadores de lectura de un control no son compatibles

Consulte también https://github.com/angular/angular/issues/13461

Answer 2

Puede mostrar mensajes de error como este:

onValueChanged(data?: any) {
if (!this.heroForm) { return; }
const form = this.heroForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '''';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + '' '';
}
}
}
}
formErrors = {
''name'': '''',
''power'': ''''
};
validationMessages = {
''name'': {
''required'': ''Name is required.'',
''minlength'': ''Name must be at least 4 characters long.'',
''maxlength'': ''Name cannot be more than 24 characters long.'',
''forbiddenName'': ''Someone named "Bob" cannot be a hero.''
},
''power'': {
''required'': ''Power is required.''
}
};

Consulte: https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive-component-template

Answer 3

Si desea comprobar si un control de formulario tiene algún validador o no, puede hacer lo siguiente:

Para validadores integrados angulares puede utilizar:

if(control.validator == Validators.required)

Para un validador personalizado, no funcionará y puede utilizar esta solución alternativa:

if(control.validator.toString() == customValidator().toString())

Answer 4

La respuesta de Günter Zöchbauer sigue siendo correcta en Angular 6, pero hay una solución que funciona bien para mí.

Mi solución depende de dos observaciones:

Primero, puede ver qué validaciones están fallando actualmente, mirando las claves en el objeto de errors . Por lo tanto, si ha especificado Validators.required y Validators.minLength , el objeto de errores se vería así:

{ required: true, minlenght: { ... } }

Eso es suficiente para muchos casos de uso, cuando realmente no le importa si existe un validador pero no impide el envío de formularios.

En segundo lugar, resulta que Angular creará validadores para que coincidan con los atributos establecidos en su entrada. Entonces, para los validadores estándar, mi sugerencia sería no especificar el validador en absoluto .

Haz algo como esto en su lugar:

<input type="text" formControlName="surname" [required]="surnameRequired">

En su declaración de formulario:

form = this.formBuilder.group({
surname: '''',
anotherField: ['''', Validators.required],
yetAnotherField: ['''', Validators.required]
});

Y luego establezca el valor de surnameRequired para agregar o eliminar el validador.

Tengo un StackBlitz trabajando .

Mi enfoque no funciona para los validadores personalizados, pero la mayoría de mis casos de uso no los utilizan. Su experiencia puede ser diferente.