Angular 2表单状态对于ng-select控件的自定义验证始终无效

Ibrahim Shah |

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

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来检查customername字段的验证。这些验证工作正常，但是当我检查表单状态时显示“ INVALID”。ng-select控件始终禁用“提交”按钮

<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属性的对象）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。