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>