Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 reactive form error displaying

I am trying to learn about Angular2's reactive forms by making a contact form. It all works good but there's an error that seems to give me quite some trouble. Everything works just fine when I use Validators.required but as soon as I add Validators.minLength or anything else on one of the controls everything messes up and I get this error in the browser's console: Expected validator to return Promise or Observable.. I looked around but I couldn't really find a simple explanation/ Here's my component:

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

}
like image 366
AugustinIT Avatar asked Apr 18 '17 21:04

AugustinIT


People also ask

How do you show error in reactive form?

When multiple validations are involved in a single formControl, we need to put multiple *ngIf in the HTML and bind the respective validator's error messages which makes the code clumsy.

How do I display mat error?

Error messages can be shown under the form field underline by adding mat-error elements inside the form field. Errors are hidden initially and will be displayed on invalid form fields after the user has interacted with the element or the parent form has been submitted.


1 Answers

When you have multiple validation rules, you must insert them inside of an array as such:

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

Update to Angular v5

A more recent implementation without FormBuilder:

form = new FormGroup({
  email: new FormControl('', 
    Validators.compose([ Validators.minLength(5), Validators.email ])),
});
like image 197
t3__rry Avatar answered Oct 10 '22 03:10

t3__rry