Validating using formControlName does not work

Question

Validating using formControlName does not work

lemoncodes91 opened this issue 4 years ago · 0 comments

[x] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Current behavior

I've encountered some issue when using formControlName and its validators. now, i've followed the documentions with regards to validation [validators] and [errorMessages] but it does not work.

Now, i noticed one thing in your demo, when using [validators] and [errorMessages], it is paired with [ngModel] and it does work. It my case, i am not using [ngModel]. I am using formControlName and i see the validators on FormControl.

          <tag-input [onlyFromAutocomplete]="true"
                    [identifyBy]="'value'"
                    [validators]="tagInputValidators"
                    [errorMessages]="tagInputErrrorMessages"
                    [displayBy]="'key'"
                    theme='bootstrap'
                    formControlName="filter_key">
              <tag-input-dropdown [autocompleteObservable]="filterListObservable"
                                  zIndex="10000"
                                  [identifyBy]="'value'"
                                  [displayBy]="'key'"
                                  [keepOpen]="false"
                                  [showDropdownIfEmpty]="true"
                                  [appendToBody]="false">
              </tag-input-dropdown>
          </tag-input>

Above code does not work. Here is my declaration of validators and error messages

  tagInputValidators = [Validators.required];
  tagInputErrrorMessages = {
    required: "Filter/s are required."
  }

Expected behavior
Must be able to display error messages on GUI tag input field

Minimal reproduction of the problem with instructions (if applicable)
1.) Use only formControlName directive and set validators and errorMessages directive of ngx-chips

What do you use to build your app?. Please specify the version
Angular CLI: 9.0.7
Node: 12.16.1
OS: win32 x64

Angular version:
@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.900.7
@angular-devkit/build-optimizer 0.900.7
@angular-devkit/build-webpack 0.900.7
@angular-devkit/core 9.0.7
@angular-devkit/schematics 9.0.7
@angular/localize 9.1.11
@ngtools/webpack 9.0.7
@schematics/angular 9.0.7
@schematics/update 0.900.7
rxjs 6.5.5
typescript 3.7.5
webpack 4.41.2

ngx-chips version:
ngx-chips 2.1.0