Trigger custom form control validation on @Input change

Question

I have a simple custom form control with one input:

const NGX_HELLO_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => HelloComponent),
    multi: true
};

const NGX_HELLO_VALIDATORS = {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => HelloComponent),
    multi: true
};

@Component({
    selector: 'hello',
    template: `<p>Value in custom form control: {{value}}</p>`,
    providers: [NGX_HELLO_VALUE_ACCESSOR, NGX_HELLO_VALIDATORS]
})
export class HelloComponent implements OnChanges, ControlValueAccessor, Validator  {

    @Input() maxLength: number;

    value: string;
    onChangeCb: (_: any) => void = () => { };
    onTouchedCb: () => void = () => { };

    ngOnChanges(changes: SimpleChanges): void {
        //trigger validation
    }

    writeValue(value: any): void {
        this.value = value;
    }

    registerOnChange(fn: any): void {
        this.onChangeCb = fn;
    }

    registerOnTouched(fn: any): void {
        this.onTouchedCb = fn;
    }

    validate(control: FormControl): ValidationErrors {
        if(this.value && this.value.length > this.maxLength) {
            return {
                tooLong: this.maxLength
            };
        }
        return null;
    }
}

which works fine. Whenever value changes, angular calls validate and the control is validated. The question is how to run validation when the @Input maxLength is changed?

I have created stackblitz example to play around.

Pierre Mallet · Accepted Answer · 2018-01-09 08:41:46Z

1

 ngOnChanges(changes: SimpleChanges): void {
    //trigger validation
    this.onChangeCb(this.value);
  }

do the trick, it seems angular rerun validation on value change.

Forked stackblitz

answered Jan 9, 2018 at 8:41

Pierre Mallet

7,2512 gold badges22 silver badges31 bronze badges

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

2 Comments

Ludevik Over a year ago

Thanks, it does revalidate the control, unfortunately calling onChangeCb sets the dirty flag on the form control. Any ideas how to prevent that?

Pierre Mallet Over a year ago

No, since it seems that you can't access the formControl through the controlValueAccessor. But maybe you can trigger the onChangeCb only if a value is already set, ( then already dirty )

Rene Juuse · Accepted Answer · 2023-07-10 15:07:34Z

0

There's a callback provided by the Validator interface for this exact case with registerOnValidatorChange.

edited Jul 10, 2023 at 15:07

answered Jul 4, 2023 at 13:13

Rene Juuse

5959 silver badges17 bronze badges

Collectives™ on Stack Overflow

Trigger custom form control validation on @Input change

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related