Angular2 reaktif form hatası görüntüleniyor

Question

Angular2'nin reaktif formlarını bir iletişim formu oluşturarak öğrenmeye çalışıyorum. Her şey iyi çalışıyor, ama bana biraz sıkıntı veren bir hata var. Validators.required'u kullandığımda her şey iyi çalışıyor, ancak Validators.minLength eklediğimde veya kontrollerden birinde her şey bozulduğunda, bu hatayı tarayıcı konsolunda görüyorum: Expected validator to return Promise or Observable.. Birden doğrulama kuralları vardır

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

} 

Answer 1

, aşağıdaki gibi bir dizinin içine sokmak onları gerekir: Etrafa baktım ama gerçekten basit bir açıklama bulamadık/İşte benim bileşenidir

this.fb.group({ 
     password: ['', [ Validators.required, Validators.minLength(5)] ] 
    }) 

Açısal v5 için Güncelleme

daha güncel uygulama FormBuilder olmadan:

form = new FormGroup({ 
    email: new FormControl('', 
    Validators.compose([ Validators.minLength(5), Validators.email ])), 
}); 

Answer 2

form oluşturucu birden fazla doğrulayıcı eklediğinizde, [] parantez doğrulayıcıları için bir dizi kullanmalısınız

this.contactForm = this.fb.group({ 
    name: ['', 
     [Validators.required, Validators.minLength(3)] 
    ], 
    email: ['', Validators.required], 
    reason: ['', Validators.required], 
    message: ['', Validators.required] 
});