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, Mar 21 '19 at 14:06
It's working fine: https://stackblitz.com/edit/angular-9nggzx — MullisS, Mar 21 '19 at 14:09
I think, you need use, when change "this.accessCodeList", `this.stepFormGroup.get('AccessCode').setValidators([Validators.required, this.requireMatch(this.accessCodeList)])` — Eliseo, Mar 21 '19 at 14:14
I fogot, use `this.stepFormGroup.get('AccessCode').updateValueAndValidity()` after change the validator — Eliseo, Mar 21 '19 at 14:22
@Eliseo I used above code after value of `this.accessCodeList` changes. Still not getting updated list in validator — Ankur Akvaliya, Mar 21 '19 at 14:39
If this.accessCodeList changes you have to set Validators again. — MullisS, Mar 21 '19 at 14:40
@MullisS Can you tell me how to change set validator of specific field again with updated value? — Ankur Akvaliya, Mar 21 '19 at 14:42
see https://stackblitz.com/edit/angular-pxez4f?file=src/app/app.component.ts (You has a type error, index can be 0 when match with the first element) — Eliseo, Mar 21 '19 at 14:44
Here is a working solution: https://stackblitz.com/edit/angular-9nggzx — MullisS, Mar 21 '19 at 14:46
@Eliseo I have updated question. my issue i am not getting updated `this.accessCodeList` in validator — Ankur Akvaliya, Mar 21 '19 at 14:47
@MullisS, change the condition, it's not accessCodes.indexOf(selection), is `accessCodes.indexOf(selection)<0` — Eliseo, Mar 21 '19 at 14:54

score 5 · Accepted Answer · answered Mar 21 '19 at 14:47

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 '19 at 14:47

Manzurul

633
6
11

1

This provide a way to access all params of component. Thanks man! – Ankur Akvaliya Mar 21 '19 at 14:57
Strangely my passed variable remains null. – C4d Nov 14 '19 at 11:31

score 3 · Answer 2 · answered Jan 23 '20 at 12:03

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

score 1 · Answer 3 · answered Mar 21 '19 at 14:17

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

I think that the problem is that Ankur want change the accessCodeList AFTER create the form. So he must use setValidators — Eliseo, Mar 21 '19 at 14:24
@Eliseo Yes, might be! Asked him about clarification but he didn't respond — Prashant Pimpale, Mar 21 '19 at 14:26
Yes. I know value will change on search since component is auto-complete — Ankur Akvaliya, Mar 21 '19 at 14:34
@AnkurAkvaliya Please edit the question and state your requirements — Prashant Pimpale, Mar 21 '19 at 14:35

Angular 7 custom validation with dynamic/updated param

3 Answers3