angular 12 custom validator validate one item is selected from array

Question

HI I am doing an Angular 12 App using Material.

I have my FormGroup like this

form:FormGroup=new FormGroup({
    Id: new FormControl(null),
    Name: new FormControl('',Validators.required),
    Recipents: new FormControl('',[Validators.required, matchingEmailValidator()]),

    IsActive: new FormControl(true),
    ProcessorName: new FormControl('',Validators.required),
    Channel: new FormArray([],[ matchingCheckValidator()]),
  });

Where I have an Arrays of checkboxes loaded dinamically from database.

I want to put a Custom Validator to validate that at least one checkbox is selected. If not, use a

<mat-error>This field is mandatory</mat-error>

Also I have a variable called channelList with all my checkbox already selected.

 changeEventFunc( ob: MatCheckboxChange) {

    if (ob.checked) {
      this.channelList.push(ob.source.id);
    } else {
      this.channelList.forEach((element,index)=>{
        if(element== ob.source.id)
        {
         this.channelList.splice(index, 1);
        }
        }
      )}
  }

I had defined a function call matchingCheckValidator where I want to put the validation

    export function matchingCheckValidator(): ValidatorFn {
      return (control:AbstractControl) : ValidationErrors | null => {
        do the task
        }
      }
    }

Here is my HTML

<mat-label><strong>Channel</strong></mat-label>
          <li *ngFor="let chanel of notification.NotificationChannelLogLevels">
            <mat-checkbox id= {{chanel.NotificationLogLevel.Id}} formArrayName="Channel"
            [checked]="chanel.IsActive"
             (change)="changeEventFunc($event)">
              {{chanel.NotificationLogLevel.Name}}
            </mat-checkbox>
          </li>

I need to run the custom validation everytime a checkbox is selected...

Is that posible?

Thanks

Answer 1

I think there is no other way than to use custom validator function.

/**
 * Form Control Validator function to check if given `array` contains `control.value`
 * - If `array` is array of objects there is option to check value by object property (`key`)
 * @param array input array of primitive values (strings, numbers) OR objects
 * @param key (optional) object property/key
 * @returns `null` (**valid**) OR `{ doesntContain: true }` (**invalid**)
 */
export function containsValueValidator(array: any[], key?: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const valid = array.includes(control.value) || (key && array.includes(control.value[key]));
    const error: ValidationErrors = { doesntContain: true };

    return valid ? null : error;
  }
}

Then, in all the places where you want to apply this validator dynamically (if you suppose array can change), you have to use following functions in the right way, e.g.:

nameControl.clearValidators();
nameControl.addValidators([Validators.required, Validators.maxLength(30), containsValueValidator(availableNamesFromDropdown)]);
nameControl.setValue(currentName);
nameControl.updateValueAndValidity();

I hope this helps some people in the future

To your specific problem

If you want to update validator on every checkbox selected, you have to do it on every (change) event's handler