How to validate optional field in angular 2?

Question

i have an email field which is optional but if has value should match the email pattern ?

what about if the form has many optional fields ,like website ,phone ,etc ?

by the way am using FormBuilder, FormGroup, Validators form @angular/forms

empty value is not email :) what about the website validation do you have html5 type also :) — Ahmad Tarawneh
– Ahmad Tarawneh, Commented Jul 23, 2017 at 1:05
You are using Reactive Forms, so you can add and remove Validators as needed to a Form Control using setValidators/clearValidators/updateValueandValidity — R. Richards
– R. Richards, Commented Jul 23, 2017 at 1:05
Some information on those: angular.io/api/forms/AbstractControl — R. Richards
– R. Richards, Commented Jul 23, 2017 at 1:10

PouleFou · Accepted Answer · 2017-09-28 20:43:18Z

11

Solved this by creating an optionalValidator:

import { ValidatorFn, AbstractControl, Validators } from '@angular/forms';

export function optionalValidator(validators?: (ValidatorFn | null | undefined)[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {

        return control.value ? Validators.compose(validators)(control) : null;
    };
}

In my reactive form:

this.form = this._fb.group({
      email: [this.contact.email, [optionalValidator([Validators.maxLength(255), Validators.email])]]
    });

answered Sep 28, 2017 at 20:43

PouleFou

1431 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

k11k2 Over a year ago

at Validators.compose(validators)(control) : null for validators showing error type undefined is not assignable to type ValidatorFn | null | undefined

js-dev · Accepted Answer · 2017-10-06 05:48:44Z

2

ex:

contactForm:FormGroup = new FormGroup({});

ngOnInit() {
const validateEmail = "[a-zA-Z0-9._\-]+[@]+[a-zA-Z0-9\-]+[.]+[a-zA-Z]{2,6}";
this.contactForm.addControl("email", new FormControl('', Validators.pattern(validateEmail));
}

this way you can create optional fields but when you have data that need to be validated

Edit: Added - to allowed characters

edited Oct 6, 2017 at 5:48

js-dev

651 silver badge4 bronze badges

answered Jul 23, 2017 at 1:59

Kr Chowdary

297 bronze badges

1 Comment

StefanJanssen Over a year ago

This regex is far from complete for a good validation. The email: " "_@local is a valid email address but does not pass this test.

Collectives™ on Stack Overflow

How to validate optional field in angular 2?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related