Custom validator parameter doesn't react to changes

Question

I got a custom validator that expects a string parameter. However when i change the parameter in code that doesn't change an initial value that was passed during form initialization. The only workaround I found is to remove validator and add it again with new parameter.

Is it a desired behaviour? How can i force angular to "reload" validator parameter?

Demo of unwanted behaviour.

Code:

HTML

<form [formGroup]="reactiveForm">
    <input type="text" formControlName="input">
  <button (click)="changeToB()" >switch to b</button>
<br>
  valid: {{reactiveForm.get('input').valid}}
  <br>
  shouldBeEqualTo: {{shouldBeEqualTo}}
</form>

TS

export class AppComponent {
  shouldBeEqualTo = 'a';
  reactiveForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.reactiveForm = this.fb.group({input: ['a', customValidator(this.shouldBeEqualTo)]})
  }

  changeToB(){
    this.shouldBeEqualTo = 'b';
  }
}

export function customValidator(equalTo: string): ValidatorFn{
 return (c: AbstractControl): { [key: string]: any } => {
   console.log(equalTo)
   console.log(c.value)
   if(c.value !== equalTo){
     return {valid: false};
   }
   return null;
 }
}

Muhammed Albarmavi · Accepted Answer · 2018-11-05 11:27:25Z

2

You may need to add custome validator to form instead of the form control this way you can have access to local property.

component

  shouldBeEqualTo = 'a';
  reactiveForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.reactiveForm = this.fb.group({ input: ['a' ]},
                      {validator:this.getCustomeValidator()})
  }

  changeToB() {
    this.shouldBeEqualTo = 'b';
  }

  getCustomeValidator() {
    return (c: AbstractControl): { [key: string]: any } => {
      if (c.value !== this.shouldBeEqualTo) {
        return { valid: false };
      }
      return null;
    }
  }
}

demo

Another way may consider can make the validator reusable,but I still recommand first solution

export class AppComponent {
  shouldBeEqualTo = 'a';
  reactiveForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.reactiveForm = this.fb.group({input: ['a', customValidator(this,'shouldBeEqualTo')]})
  }

  changeToB(){
    this.shouldBeEqualTo = 'b';
  }
}

export function customValidator($this,property:string): ValidatorFn{
 return (c: AbstractControl): { [key: string]: any } => {
   if(c.value !== $this[property]){
     return {valid: false};
   }
   return null;
 }
}

demo

edited Nov 5, 2018 at 11:27

answered Nov 5, 2018 at 9:57

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

4 Comments

karoluS Over a year ago

This way i lost a validator reusability in other forms. It also feels hacky doesn't it?

Muhammed Albarmavi Over a year ago

Your validator depend on other value that may going to update like class property if 's will not be possible in that case you make the validator not reusable :\

karoluS Over a year ago

it is working. However i'd wait to mark question as answered. Maybe i will figure out how to extract validator to make it reusable across components. Thank you anyway.

Muhammed Albarmavi Over a year ago

I have add another solution @karoluS

Collectives™ on Stack Overflow

Custom validator parameter doesn't react to changes

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related