FormControl.setValidators...why is there no getValidators?

[Icepick]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
We have an AbstractControl with basic validators like (required, maxLength) in a ReactiveForm via TypeScript FormBuilder. To those basic validators we added a custom validator which dynamically change the validation strategy based on a dropdown value. Currently we are using the setValidators() method inside another component (AbstractControl is included via @Input()). The main problem is that it overwrites existing validators.
Example:

App Component

this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]] 
    });

App Template

<zip ...
        [control]="form.controls.zip">
</zip>

ZIP Component

@Input() control: AbstractControl;

this.control.setValidators([
      // redundant to formBuilder
      Validators.required,
      Validators.maxLength(10),
      // custom validation based on a dropdown value (via. valueChange Detection)
      validateZipFn(countryCode)]
    );

Expected behavior
To stay flexible we don't want to overwrite all validators. The below code would illustrate the behavior with a getValidators() method.

App Component

this.formBuilder.group({
      zip: ['', [Validators.required, Validators.maxLength(10)]]
    });

App Template

<zip ...
        [control]="form.controls.zip">
</zip>

ZIP Component

@Input() control: AbstractControl;

let listOfAllValidationRules = this.control.getValidators().push(validateZipFn(countryCode)]);
this.control.setValidators(listOfAllValidationRules);

What is the motivation / use case for changing the behavior?
Being more flexible with dynamic validation.

• Angular version: ~2.1.2

• Browser: all

• Language: TypeScript / ES6

[DzmitryShylovich]

@Icepick there's nothing to return. validators are stored as a single object, not an array.

[Bidthedog]

@DzmitryShylovich Does that mean this cannot be implemented? Personally, I only need a readonly copy of the validators with the metadata attached.

[xeii]

I am building a directive where an object of validation messages is passed in. This is simply an object with the validation rule name is the key and the value is the message to be displayed. I would like to compare this object and the set validators of the NgControl, so that the user is warned if a certain message is missing.

[oehm-smith]

I would like to see this also for similar reasons to @Bidthedog. For example, if a Validator.requried is on a control then we'd like to programatically indicate this on the form. Read-only is all we require. Currently the best I can do is define an array on the component and pass that to the form control definition. Its going to get ugly pretty quickly!

Is this on the road map and if so is there any ETA on this functionality?

[Bidthedog]

Exactly. I basically have three big nasty duplicate definitions in my form service now. The below code snippets are a tiny excerpt from a rather large, 6 page form I'm putting together. This is for page one (details) and the start of page 2 (medical):

To create / define:

  private createForm() {
    this.form = this.fb.group({
      details: this.fb.group({
        NHSNumber: [null, [Validators.required, Validators.pattern(/^\d{3}-\d{3}-\d{4}$/)]],
        titleId: [null, [Validators.required]],
        firstName: [null, [Validators.required, Validators.maxLength(10)]],
        middleNames: null,
        lastName: [null, [Validators.required]],
        DOB: [null, [Validators.required]],
        genderId: [null, [Validators.required]],
        regionId: [null, [Validators.required]],
        maritalStatusId: [null, [Validators.required]],
        occupationTypeId: [null],
        occupationId: null,
        telephoneNo: null,
        mobileNo: null,
        houseNumber: null,
        streetName: null,
        town: null,
        city: null,
        county: null,
        postcode: null,
        GPId: null,
        nextOfKinId: null,
        livesWith: null
        //vehicleLicenseTypeId?: number[]
      }),
      medical: this.fb.group({
        gpId: [null, [Validators.required]]
      })
    });
  }

To populate:

  private populateForm() {
    let m = this.model;
    this.form.setValue({
      details: {
        NHSNumber: this.getTextValue(m.NHSNumber),
        titleId: this.getLookupValue(m.titleId),
        firstName: this.getTextValue(m.firstName),
        middleNames: this.getTextValue(m.middleNames),
        lastName: this.getTextValue(m.lastName),
        DOB: this.getDateValue(m.DOB),
        genderId: this.getLookupValue(m.genderId),
        regionId: this.getLookupValue(m.regionId),
        maritalStatusId: this.getLookupValue(m.maritalStatusId),
        occupationTypeId: this.getLookupValue(m.occupationTypeId),
        occupationId: this.getLookupValue(m.occupationId),
        telephoneNo: this.getTextValue(m.telephoneNo),
        mobileNo: this.getTextValue(m.mobileNo),
        houseNumber: this.getTextValue(m.houseNumber),
        streetName: this.getTextValue(m.streetName),
        town: this.getTextValue(m.town),
        city: this.getTextValue(m.city),
        county: this.getTextValue(m.county),
        postcode: this.getTextValue(m.postcode),
        GPId: this.getLookupValue(m.GPId),
        nextOfKinId: this.getLookupValue(m.nextOfKinId),
        livesWith: this.getTextValue(m.livesWith)
      },
      medical: {
        gpId: this.getLookupValue(m.GPId) || 1
      }
    });

Validation rules. Not complete, but you can see how this is going to get messy, fast

  private formValidationMessages = {
    details: {
      NHSNumber: {
        required: '\'NHS Number\' is required',
        pattern: '\'NHS Number\' must be in the format \'NNN-NNN-NNNN\' where N is a digit'
      },
      titleId: {
        required: '\'Title\' is required'
      },
      firstName: {
        required: '\'First Name\' is required'
      }
    },
    medical: {
    }
  };

I started working on defining all the form rules in one object set, which I'm thinking of iterating through / projecting into the functions listed above (though I've not got that far yet):

  private formValidationMessages = {
    details: {
      NHSNumber: {
        required: '\'NHS Number\' is required',
        pattern: '\'NHS Number\' must be in the format \'NNN-NNN-NNNN\' where N is a digit'
      },
      titleId: {
        required: '\'Title\' is required'
      },
      firstName: {
        required: '\'First Name\' is required'
      }
    },
    medical: {
    }
  };

On top of this, of course, I have the data model definition, and then all the layers on the back-end; there has to be something we can do to reduce code bloat?

[JamesHenry]

I also just got hit by not being able to retrieve the configured Validators for a FormControl.

I worked around it by adding a utility service which wraps the config object before it is passed into the FormBuilder, and keeps track of a mapping between control names and their given Validators.

It would naturally be great to remove the need for this extra service 😄

[Bidthedog]

Well, since I posted here I've consolidated all my form configuration into one big object, and wrote a few helper methods that do the mapping between form and model based on the config. It all seems way too complicated, but it could just be the learning curve I've had.

[robMaiSill]

Hi,
just wondering if there is any word on this feature. It seems to me that being able to visually mark certain items as required is a basic feature expected of any modern forms UI. Yet since there is no way to retrieve the information whether a field is required or not, it is impossible to implement this feature using reactive forms.

[Bidthedog]

It's not impossible, it's just a LOT of work.

[Toub]

@Bidthegod do you mean it would be a LOT of work to implement this feature in angular, or it would be a LOT of work to retrieve the validators in an angular component.

If it is possible to retrieve the validators in a component, any input about how to do is welcome!

Or if it is easier for certain component types (input, select), it can be useful too.

[Bidthedog]

@Toub What I ended up doing was building a "config" object structure that contained every individual form field, and all its settings (display, validators and rules etc). I then wrote a few helper methods to query the config, which builds up the FormGroup. Each form has a form service, and inherits from a base component.

I wouldn't say it's an easy fix, and it's tons of code, but it ended up being fairly elegant and easy to create a fairly complex form. Threw some of the code in a gist for you to look at, but I've not got time to modularise properly it at the moment. There are quite a few files missing from this - including all the custom form input components I wrote.

https://gist.github.com/Bidthedog/1dc7d10cda1759061c09f44f7b48cbf3

[Toub]

@Bidthedog it doesn't feet my needs but thanks for your answer, as the gist can be useful for others.