Lỗi hình thức phản ứng Angular2 hiển thị

Question

Tôi đang cố gắng tìm hiểu về các dạng phản ứng của Angular2 bằng cách tạo một biểu mẫu liên hệ. Tất cả hoạt động tốt nhưng có một lỗi mà dường như cho tôi một số rắc rối. Mọi thứ hoạt động tốt khi tôi sử dụng Validators.required nhưng ngay sau khi tôi thêm Validators.minLength hoặc bất kỳ thứ gì khác trên một trong các điều khiển, mọi thứ đều lộn xộn và tôi gặp lỗi này trong bảng điều khiển của trình duyệt: Expected validator to return Promise or Observable.. Tôi nhìn xung quanh nhưng tôi thực sự không thể tìm thấy một lời giải thích đơn giản/Dưới đây là phần của tôi:

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

Khi bạn có nhiều quy tắc xác nhận, bạn phải chèn chúng bên trong một mảng như vậy:

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

Update để v5 góc

Một thực hiện gần đây hơn mà không FormBuilder:

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

Answer 2

Khi bạn thêm nhiều hơn một validator trong xây dựng biểu mẫu, bạn nên sử dụng một mảng [] niềng răng cho xác nhận

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