forms - validate - Angular2: ¿Averigua si FormControl ha requerido un validador?

template forms angular 2

Question

¿Alguien sabe una manera de averiguar para un Angular2 FormControl si el validor requerido está registrado para el control?

this.form = builder.group({name: ['''', Validators.required]};

¿Puedo consultar el this.form.controls[''name''] si es un campo obligatorio? Sé que puedo verificar si es válido, pero eso no es lo que quiero.

Saludos cordiales, Marc

Answer 1

Esta función debería funcionar para FormGroups y FormControls

 export const hasRequiredField = (abstractControl: AbstractControl): boolean => {
if (abstractControl.validator) {
const validator = abstractControl.validator({}as AbstractControl);
if (validator && validator.required) {
return true;
}
}
if (abstractControl[''controls'']) {
for (const controlName in abstractControl[''controls'']) {
if (abstractControl[''controls''][controlName]) {
if (hasRequiredField(abstractControl[''controls''][controlName])) {
return true;
}
}
}
}
return false;
};

Answer 2

No hay un método para verificar los validadores u obtener todos los validadores: https://github.com/angular/angular/issues/13461

La solución @ fairlie-agile es bastante inteligente. Pero creo que tenemos que usar FormControl vacío porque necesitamos un validador de disparo requerido y this.group.controls[this.config.name] ya podría estar inicializado con algún valor.

ngOnInit() {
let formControl = this.group.controls[this.config.name];
let errors: any = formControl.validator && formControl.validator(new FormControl());
this._required = errors !== null && errors.required;
}

Answer 3

No sé cuál es la manera exacta de verificar si el control ha requerido un validador o no.

Pero la solución podría ser esta: siempre que el control haya requerido un validador, agrega la función validador () a ese control.

p.ej.

<input type="text" formControlName="firstname">
constructor(private formBuilder: FormBuilder){
this.registerForm = this.formBuilder.group({
firstname: ['''', Validators.required] //<<<===one required validation on firstname control
});
console.log(this.registerForm.controls.firstname.validator.length);
//<<<===this will return 1.
});

}

En el código anterior, la longitud del validador es uno (1)

 console.log(this.registerForm.controls.firstname.validator.length);
//this will return exception

esta línea devolverá uno. Si no se adjunta ningún validador, el primer nombre no tendrá la función de validador (), por lo que en ese caso daré una excepción.

DEMO: https://plnkr.co/edit/I7b5JNAavmCJ6Py1eQRr?p=preview

Answer 4

Si bien, no hay una API para encontrar directamente si el validador requerido está configurado para un campo en particular, la forma de lograrlo es como se muestra a continuación:

 this.required = false;
let formControl = new FormControl();
if (this.formGroup.controls[this.name].validator) {
let validationResult = this.formGroup.controls[this.name].validator(formControl);
this.required = (validationResult !== null && validationResult.required === true);
}

He probado esto y esto se dispara solo si el Validator.Required validador se agrega al FormControl particular.

Answer 5

Tengo un problema similar. Por ahora, estoy usando esto:

 import { Attribute } from ''@angular/core'';
// "Kind-of" hack to allow "pass-through" of the required attribute
constructor(@Attribute(''required'') public required) {
// call super here if the component is an ancestor
}

Estoy realmente sorprendido de por qué las propiedades como "deshabilitadas" están incluidas en FormControl, pero no son "necesarias".

Answer 6

Una forma de hacer esto es verificar si el control es válido cuando se carga el formulario para ver si tiene el error requerido (que lo hará si el campo está vacío).

Esto no funcionará para otros validadores, como minLength, ya que no se activan hasta que se cambia el control

export class FormInputComponent implements Field, OnInit {
private _required: boolean;
config: FieldConfig;
group: FormGroup;
/** Readonly properties. */
get required(): boolean {
return this._required;
}
ngOnInit() {
var _validator: any = this.group.controls[this.config.name].validator && this.group.controls[this.config.name].validator(this.group.controls[this.config.name]);
this._required = _validator && _validator.required;
}
}