Custom validation in Angular4

Question

In my page I am having a simple form group. in which I have to write a custom validation for a name.

this.searchForm = this._formBuilder.group({

        profileName: new FormControl('', Validators.compose([Validators.required])),
        TypeId: new FormControl('', Validators.compose([Validators.required])),
        tempRange: new FormControl('', Validators.compose([Validators.required])),
        region: new FormControl('', Validators.compose([Validators.required])),
        quarter1: new FormControl('', Validators.compose([Validators.required])),
        quarter2: new FormControl('', Validators.compose([Validators.required]))

    }, {
            validator: this.customValidator// your validation method
        });

I have put the custom validation in a method this.customValidator .

One of my validation is to check duplicate check for profileName.

I am having issue on getting other method (where validation logic resides) in the same type script class from the validation method, when I am calling that method (which is not static or a function) I am getting an error as (on pressing f12)

ERROR Error: Uncaught (in promise): TypeError: this.validateProfileName is not a function... '.

Is there any way to call the particular method, or I need to implement all the logic in side the validation method it self.

Also how can I show the validation error message from there in the same style as the required field validation error message.

My validation method

customValidator(control: AbstractControl) {
    debugger;
    let profileName = control.get('profileName').value;
    let retgionCode = control.get('regionCode').value;
    let forcastType = control.get('forecastTypeId');
    var status = this.validateProfileName(retgionCode, profileName);

    if (!status)
    control.get("profileName").setErrors({ 'invalidProfileName': true });

    return null;
}

No one can know what the error is in your code if you don't show us your code ;) — AVJT82
– AVJT82, Commented Feb 19, 2018 at 14:05

AVJT82 · Accepted Answer · 2018-02-19 14:49:44Z

3

The problem is with this. As you are having it now, you are loosing the scope of this. Inside your custom validator, this is not pointing to your component scope, but the function scope. And there is no validateProfileName in the scope of the function, so Angular is giving you the correct error.

To preserve the context of this, bind it:

validator: this.customValidator.bind(this)

Now you have access to the scope outside of the custom validator.

answered Feb 19, 2018 at 14:49

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

1 Comment

Hali Over a year ago

Hi, Thank you for your comment, please confirm where i need to call the binding ? is it the same place where i am calling the validator ?

RockGuitarist1 · Accepted Answer · 2018-02-19 14:40:20Z

0

Looks like you are doing more work than you need to do, and you aren't calling a function in your custom validator anyways. This is what you want:

this.searchForm = this._formBuilder.group({
    profileName: ['', Validators.required],
    TypeId: ['', Validators.required],
    tempRange: ['', Validators.required],
    region: ['', Validators.required],
    quarter1: ['', Validators.required],
    quarter2: ['', Validators.required]
}, { validator: this.customValidator() });

Then in your validation function, you need to do this:

customValidator() {
    debugger;
    let profileName = this.searchForm.get('profileName').value;
    let retgionCode = this.searchForm.get('regionCode').value;
    let forcastType = this.searchForm.get('forecastTypeId');
    let status = this.validateProfileName(retgionCode, profileName);

    if (!status) {
        this.searchForm.get("profileName").setErrors({ 'invalidProfileName': true });
        return null;
    }
}

edited Feb 19, 2018 at 14:40

answered Feb 19, 2018 at 14:10

RockGuitarist1

7161 gold badge7 silver badges16 bronze badges

4 Comments

Hali Over a year ago

Thank you for your comment, but i cannot call the validation method as you suggested, I have updated my post adding the validation method too. in which i have to give a parameter abstract control and the method is hitting even without "()" in the call.

RockGuitarist1 Over a year ago

You will throw an error 100% of the time if you call a function that is expecting a parameter, and you don't supply one. Sure you can call your function without the (), but in this case you need to, but your function is requiring an AbstractControl.

Hali Over a year ago

if i am commenting out the "var status = this.validateProfileName(retgionCode, profileName);" from the method, the debugger is hitting without any error and i am getting the particular AbstractControl from where the validation is called. I am also getting the Profile Name and Region Code while debugging.

RockGuitarist1 Over a year ago

control is going to be undefined unless you pass something into the customValidation function. Your code is incomplete. I will update my post to what you want.

Collectives™ on Stack Overflow

Custom validation in Angular4

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related