Angular 7 custom validation with dynamic/updated param

Question

I am using angular 7 with material design components

I have requirement to add requireMatch validation to mat-autocomplete.

I have created custom validation with param but param value does change dynamically.

Below is my component code.

this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});

////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}

Issue i am facing that i am always getting empty(init) in accessCodes inside requireMatch.

Changes of this.accessCodeList does not reflect to validator.

Meaning after changing this.accessCodeList it doesn't get updated array in requireMatch validator.

So anyone have any idea about how to pass dynamic param in custom-validator?

And also the question is not clear--) Just describe what you want? and what currently not working — Prashant Pimpale
– Prashant Pimpale, Commented Mar 21, 2019 at 14:06
I think, you need use, when change "this.accessCodeList", this.stepFormGroup.get('AccessCode').setValidators([Validators.required, this.requireMatch(this.accessCodeList)]) — Eliseo
– Eliseo, Commented Mar 21, 2019 at 14:14
Here is a working solution: stackblitz.com/edit/angular-9nggzx — MullisS
– MullisS, Commented Mar 21, 2019 at 14:46

Manzurul · Accepted Answer · 2019-03-21 14:47:20Z

5

You need to bind the validation function when you call it like this otherwise validator function will not bind the input accessList

[Validators.required, this.requireMatch(this.accessCodeList).bind(this)]

Also if you want to restrict some word in the field you can have a look one of my npm package here https://www.npmjs.com/package/ng4-validation

answered Mar 21, 2019 at 14:47

Manzurul

6336 silver badges11 bronze badges

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

2 Comments

Ankur Over a year ago

This provide a way to access all params of component. Thanks man!

C4d Over a year ago

Strangely my passed variable remains null.

SAMUEL · Accepted Answer · 2020-01-23 12:03:45Z

To make your validator function with the latest value in the controller, you can pass it as a function and resolve whenever it is required. so your validator function will get the latest or current value.

Below code will give some insight on my answer

// Component 
this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(() => this.accessCodeList)]]
});

//Validator Function
requireMatch = (getAccessCodes: (() => string[])) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        const accessCodes = getAccessCodes();
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}

Prashant Pimpale · Accepted Answer · 2019-03-21 14:17:45Z

1

As per my assumption, you want to compare user input with the string array with the FormControl. So you can get the index of an item and check if it is not equal to -1 like:

var index = accessCodes.indexOf(selection);
if (index != -1) { // That means item found in the array
  console.log('if')
  return { requireMatch: true };
}
else {
  // console.log('esle')
  return null;
}

TS Code:

import { Component, Inject, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
  public stepFormGroup: FormGroup;
  accessCodeList: any[] = ['Prashant', 'Pimpale'];

  constructor(private fb: FormBuilder) {

  }

  public ngOnInit(): void {
    this.stepFormGroup = this.fb.group({
      AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
    });
  }

  ////require-match validation for access-code
  requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
      const selection: any = control.value;

      console.log("accessCodes", accessCodes, "selection", selection);
      var index = accessCodes.indexOf(selection);
      if (index != -1) {
        console.log('if')
        return { requireMatch: true };
      }
      else {
        // console.log('else')
        return null;
      }
      return null;
    }
  }
}

HTML Code:

<input [formControl]="stepFormGroup.get('AccessCode')">

StackBlitz

answered Mar 21, 2019 at 14:17

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

4 Comments

Eliseo Over a year ago

I think that the problem is that Ankur want change the accessCodeList AFTER create the form. So he must use setValidators

Prashant Pimpale Over a year ago

@Eliseo Yes, might be! Asked him about clarification but he didn't respond

Ankur Over a year ago

Yes. I know value will change on search since component is auto-complete

Prashant Pimpale Over a year ago

@AnkurAkvaliya Please edit the question and state your requirements

Collectives™ on Stack Overflow

Angular 7 custom validation with dynamic/updated param

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related