Angular 2 form status is always invalid with custo

Question

I have used validation in user info form as below.

this.userInfoForm = this.fb.group({
    retrieveId: [''],
    customerName: [[],[UtilityService.checkMinLength(3, 50)]],
});

I have created below service to check validation

 @Injectable()
 export class UtilityService {
     static checkMinLength(min: number, max: number): ValidatorFn {
         return (c: AbstractControl) => {
             if (c.value && c.value != undefined) {
                 return {
                     'checkMinLength': c.value.some((a) => {
                         if (a.itemName.length < min || a.itemName.length > max) { return true; }
                         return null;
                      })
                 };
            }
        }
    }

In HTML using checkMinLength to check validation for customername field. These validations are working properly but when I checked form status it shows 'INVALID'. and submit button is always disabled for ng-select control

<form class="form-horizontal" novalidate (ngSubmit)="saveInfo()" [formGroup]="userInfoForm" autocomplete="off">
    <fieldset>
        <div class="form-group padding-top-bottom" [ngClass]="{'has-error': (userInfoForm.get('customerName').touched || userInfoForm.get('customerName').dirty) &&!userInfoForm.get('customerName').valid }">
            <label class="col-md-4" for="customerNameId" tooltip={{attributeNames.customerNameTitle}} data-placement="right">Customer Name</label>
            <div class="col-md-7">
                <ng-select [items]="customerName" multiple="true" [addTag]="true" bindLabel="itemName" (change)="onItemSelect($event,'customer','customerName')" formControlName="customerName" [(ngModel)]="customerName"></ng-select>
                <span class="help-block" *ngIf="userInfoForm.get('customerName').touched ||userInfoForm.get('customerName').dirty) &&userInfoForm.get('customerName').errors">
                    <span *ngIf="userInfoForm.get('customerName').errors.checkMinLength">End Customer Name must be longer than 3 characters.</span>
                </span>
           </div>
       </div>
       <button class="btn btn-primary" id="submitForm" type="submit" [disabled]="!userInfoForm.valid || !userInfoForm.dirty">Save</button>
    </fieldset>
</form>

Answer 1

if a control is valid your validator must return "null" (not an object with a property null)

export class UtilityService {
 static checkMinLength(min: number, max: number): ValidatorFn {
     return (c: AbstractControl) => {
         if (c.value && c.value != undefined) {
             return {
                 'checkMinLength': c.value.some((a) => {
                     if (a.itemName.length < min || a.itemName.length > max) { return true; }
                  })
             };
        }
        return null; // LOOK HERE
    }
}