Form Array validation

[psenechal]

Hey Luca,

Got a new one for you. I have a temporary work-around in place already, so no rush on this.

One of my form controls is a form array used for checkboxes. The custom validator returns true if at least one checkbox isn't checked. I can't seem to figure out if your validation directive will work in this case and if so, how to properly set it up.

Here is the form creation:

  private createSearchForm() {
    this.searchForm = this._formBuilder.group({
      deas: new FormArray([], minSelectedCheckboxes(1)),
      searchBy: ['time_period']
    });

    this.addDeas();
  }

  private addDeas() {
    this.deas.forEach((dea, index) => {
      const control = new FormControl();
      (this.searchForm.controls.deas as FormArray).push(control);
    });
  }

So the deas control is created as a FormArray with the validator on the array

Here is the HTML:

      <div formArrayName="deas" class="form-group" formFieldContainer>
        <div *ngFor="let dea of getDeas().controls; let i = index; trackBy: trackByFunction" class="custom-control custom-checkbox">
          <input type="checkbox" id="dea_{{i}}" class="custom-control-input" [formControlName]="i">
          <label for="dea_{{i}}" id="dea_label_{{i}}" class="custom-control-label">{{deas[i].deaNumber}}: {{deas[i].category}}, {{deas[i].licenseNumber}}</label>
        </div>
      </div>

And here is the workaround doing manual validation:

      <div formArrayName="deas" class="form-group" [ngClass]="{'is-invalid': searchForm.controls['deas'].invalid && f.submitted}" formFieldContainer>
        <div *ngFor="let dea of getDeas().controls; let i = index; trackBy: trackByFunction" class="custom-control custom-checkbox">
          <input type="checkbox" id="dea_{{i}}" class="custom-control-input" [formControlName]="i">
          <label for="dea_{{i}}" id="dea_label_{{i}}" class="custom-control-label">{{deas[i].deaNumber}}: {{deas[i].category}}, {{deas[i].licenseNumber}}</label>
        </div>
        <div *ngIf="searchForm.hasError('requireOneCheckboxToBeChecked', ['deas'])" class="invalid-feedback">
          <fa-icon [icon]="['fas', 'times-circle']"></fa-icon>
          <span> At least one checkbox must be selected</span>
        </div>
      </div>

I can see the app-custom-errors tag being added after the form-group div, but it never gets populated with an error.

Any ideas if this is possible and if so, how to rearrange this to work with your validator? Thanks for the assistance!

[psenechal]

I was looking through the code to get an idea of what could be done and it appears that validation is only triggered for FormControlName. Would it be possible to allow validation for FormArrayName as well since we're allowed to add validators on these when using Reactive Forms?

Possibly an idea for a future enhancement when you have time.

I also ran into another scenario that I wasn't expecting with a client. They want a "clear form" button which also removes the validation messages...so I'm trying to put something together that will remove the "is-invalid" class from the controls in this scenario. Honestly, I didn't think people used "clear form" buttons any more, but oh well.

[rams23]

@psenechal I added a directive with formArrayContainer that search for a formArrayName element to validate. I added also a test similar to your example in the lazy part of the example project. I'm working on the imperative clear. You can find in npm the v0.1.0! Really thanks for your interactions and hints!

[rams23]

@psenechal v0.2.0 adds a clear imperative method to the validation contexts

[psenechal]

Thanks Luca! I'll implement these tonight when I'm working on that project.

The project, btw, is for California Department of Justice...so I'm making sure that your library is getting some good visibility within the State of California government. I'm hoping to get it used in CalPERS as well. Form validation always seems to be a challenge for the state and your library makes it unbelievably easy.

[psenechal]

Tested both the form array validation and the clear method and they both work beautifully! Thanks so much Luca!