CODEWITHSUNDEEP
angularangular5angular2-formsangular4-formsangular-validation
Pritam Parua
Pritam Parua

Reputation: 692

setValidators in custom control without from reference in Angular

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>

Upvotes: 6

Views: 6709

Answers (2)

Wilt
Wilt

Reputation: 44316

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

Upvotes: 1

Tomasz Kula
Tomasz Kula

Reputation: 16837

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:

  1. Remove NG_VALUE_ACCESSOR and NG_VALIDATORS from the providers array.

  2. 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

Upvotes: 10

Related Questions