Estoy tratando de aprender sobre las formas reactivas de Angular2 haciendo un formulario de contacto. Todo funciona bien, pero hay un error que parece causarme bastantes problemas. Todo funciona bien cuando uso Validators.required , pero tan pronto como agrego Validators.minLength o cualquier otra cosa en uno de los controles, todo se estropea y aparece este error en la consola del navegador: Expected validator to return Promise or Observable. . Miré a mi alrededor pero realmente no pude encontrar una explicación simple. Aquí está mi componente:
export class ContactRouteComponent { contactForm: FormGroup; reasons = REASONS; constructor(private fb: FormBuilder) { this.createForm(); } createForm() { this.contactForm = this.fb.group({ name: ['', <any>Validators.required, <any>Validators.minLength(3)], email: ['', <any>Validators.required], reason: ['',<any>Validators.required], message: ['', <any>Validators.required] }); // AFISEAZA MESAJE EROARE this.contactForm.valueChanges.subscribe(data => this.onValueChanged(data)); this.onValueChanged(); } onSubmit() { console.log(this.prepareContactForm()); this.contactForm.reset(); } prepareContactForm() { const formModel = this.contactForm.value; const contactValues: Contact = { name: formModel.name as string, email: formModel.email as string, reason: formModel.reason as string, message: formModel.message as string }; return contactValues; } onValueChanged(data?: any) { if(!this.contactForm) { return; } const form = this.contactForm; for(const field in this.formErrors) { // clear previous messages 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': '', 'email': '', 'reason': '', 'message': '' } validationMessages = { 'name': { 'required': 'Name is required', 'minLength': 'Name has to be...' }, 'email': { 'required': 'Name is required' }, 'reason': { 'required': 'Name is required' }, 'message': { 'required': 'Name is required' } } }Cuando tiene varias reglas de validación, debe insertarlas dentro de una matriz como tal:
this.fb.group({ password: ['', [ Validators.required, Validators.minLength(5)] ] })Actualizar a Angular v5
Una implementación más reciente sin FormBuilder :
form = new FormGroup({ email: new FormControl('', Validators.compose([ Validators.minLength(5), Validators.email ])), });Cuando agrega más de un validador en el generador de formularios, debe usar una matriz [] llaves para los validadores
this.contactForm = this.fb.group({ name: ['', [Validators.required, Validators.minLength(3)] ], email: ['', Validators.required], reason: ['', Validators.required], message: ['', Validators.required] });