setValidators in custom control without from reference in Angular

Question

i have created a custom input control. I don't want to create any custom validation. I want to use default required, minLength, maxLength etc.I know i can do like this

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

but i can't send form reference from parent component. How can i use setValidator inside textbox component.

// input-box.component.ts    
    import { Component, Input, forwardRef } from '@angular/core';
    import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';


    @Component({
      selector: 'app-input-box',
      template:`<label >{{inputdata.label}}</label><br>
      <input type="text" required #textBox [value]="textValue" (keyup)="onChange($event.target.value)" />`,
      styleUrls: ['./input-box.component.less'],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true
        },
        /*{
          provide: NG_VALIDATORS,
          useExisting: forwardRef(() => InputBoxComponent),
          multi: true,
        }*/]
    })
    export class InputBoxComponent implements ControlValueAccessor {
      @Input() inputdata: any;
      private textValue: any = '';

      onChange(value) {
        this.textValue = value;
        this.propagrateChange(value);
      }

      private propagrateChange = (_: any) => { };

      writeValue(value: any) {
        if (this.inputdata.value) {
          this.textValue = this.inputdata.value;
          this.propagrateChange(this.inputdata.value);
        }

      }

      registerOnChange(fn: (value: any) => any) {
        this.propagrateChange = fn;
      }


      registerOnTouched() { }
    }

use in different component

<app-input-box  name="textBoxParent_{{index}}"  [inputdata]="goaldata"  ngModel ></app-input-box>

Tomasz Kula · Accepted Answer · 2018-03-30 17:04:59Z

10

If you want to access the FormControl inside a class that wants to implement the ControlValueAccessor you have to change your usual implementation. You cannot register the class as ControlValueAccessor in the providers array AND inject the FormControl in the constructor. Because the FormControl will try to inject your class, and you will try to inject the control, which will create a circular dependency.

So the changes you need to make are as follows:

Remove NG_VALUE_ACCESSOR and NG_VALIDATORS from the providers array.

Inject NgControl in the constructor and set the control's ControlValueAccessor and Validators.

constructor(@Self() ngControl: NgControl) { 
   ngControl.valueAccessor = this;
   ngControl.setValidators([Validators.minLength(1), Validators.maxLength(30)]
   ngControl.updateValueAndValidity()
}

If you want to keep the validators specified by the consumer of your custom form component you need to modify the constructor to this:

constructor(@Self() ngControl: NgControl) { 
  const control = ngControl.control;

  let myValidators = [Validators.required, Validators.minLength(5)];
  let validators = control.validator
  ? [control.validator, ...myValidators]
  : myValidators;

  control.setValidators(validators)
  control.updateValueAndValidity();
}

Check out the whole process explained by Kara Erickson (angular core) at AngularConnect 2017. Link

answered Mar 30, 2018 at 17:04

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

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

1 Comment

slanden Over a year ago

@TomaszKula, I watched that video which solves OP's use case without custom validation, but is there a way to also use a custom validation method that's defined in the custom form control's class?

Wilt · Accepted Answer · 2021-10-07 08:15:44Z

1

You could also leave your code as it is and simply get the NgControl from the Injector as follows:

constructor(private injector: Injector) { 
}

public ngAfterViewInit(): void {
  const ngControl = this.injector.get(NgControl);
  const control = ngControl.control;
  // Do whatever you want with validators now:
  control.setValidators(validators)
  control.updateValueAndValidity();
}

You will need to use the lifecycle hook ngAfterViewInit otherwise the control will not yet be available.

Like this you skip the issues with circular dependencies and you can leave the NG_VALUE_ACCESSOR and NG_VALIDATORS in the providers array.

See a related question about injecting NgControl here.
Using the injector is suggested in the answer from @yurzui here

edited Oct 7, 2021 at 8:15

answered Oct 7, 2021 at 7:49

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

1 Comment

Ben Thomson Over a year ago

I battled with issues of injecting ngControl but control not being populated for a long time and moving it to ngAfterViewInit was the solution for me. Injecting via the constructor and removing the providers meant that validate() was never called/used and that ng-valid/invalid was never set on the component, which I needed.

Collectives™ on Stack Overflow

setValidators in custom control without from reference in Angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related