Angular 2表单状态对于ng-select控件的自定义验证始终无效 [英] Angular 2 form status is always invalid with custom validation for ng-select control

问题描述

我已经在下面的用户信息表单中使用了验证。

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

我已经创建了以下服务来检查验证

 @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;
                      })
                 };
            }
        }
    }

在HTML中使用checkMinLength进行检查验证客户名称字段。这些验证工作正常，但是当我检查表单状态时会显示 INVALID。 ng-select控件始终禁用提交按钮

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>

推荐答案

如果控件有效，则您的验证程序必须返回 null （不是属性为null的对象）

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
    }
}

这篇关于Angular 2表单状态对于ng-select控件的自定义验证始终无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！