Ошибка углового пользовательского валидатора (ожидаемый валидатор вернет обещание или наблюдаемый)

Question

Я написал собственный валидатор для поля телефона и получил
ошибка

Ожидаемый валидатор вернет Promise или Observable.

для простоты мне просто нужно проверить, если номер телефона меньше 10 символов

html

<div class="form-group col-xs-3 col-md-3"
                                       [ngClass]="{
                                     'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     !ersaForm.get('phone').valid
                                     }">

                                    <label for="phoneId" class="control-label">Phone</label><br />
                                    <p-inputMask mask="(999) 999-9999" formControlName="phone"  inputStyleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>
                                    <span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     ersaForm.get('phone').errors">
                                        <span *ngIf="ersaForm.get('phone').errors.phonePBXCheck">
                                            invalivd Phone Number.
                                        </span>

                                    </span>

                                </div>

TS

function phoneCheck(phone: string): ValidatorFn{
    return (c: AbstractControl): { [key: string]: boolean } | null => {

       var phoneVal = c.value;
            phoneVal = phoneVal.replace('(', '');
            phoneVal = phoneVal.replace(')', '');
            phoneVal = phoneVal.replace('-', '');
            phoneVal = phoneVal.replace('_', '');
            phoneVal = phoneVal.replace(' ', '');
            console.log('custom validation ' + phoneVal);
            if (c.value != undefined && isNaN(c.value) ||  phoneVal.lenght<10) {
                return { 'phonePBXCheck': true };
        };
        return null;
    };
}

     this.ersaForm = this._fb.group({
            phone: ['', Validators.required, phoneCheck('')],
        });

Что мне не хватает?

Answer 1

Редактировать : Вам просто нужно обернуть валидаторы в массив.

 this.ersaForm = this._fb.group({
   phone: ['', [Validators.required, phoneCheck('')]],
 });

Кроме того, просто для предложения вы можете удалить эти строки из вашего валидатора:

phoneVal = phoneVal.replace('(', '');
phoneVal = phoneVal.replace(')', '');
phoneVal = phoneVal.replace('-', '');
phoneVal = phoneVal.replace('_', '');
phoneVal = phoneVal.replace(' ', '');

и вместо этого используйте атрибут unmask p-inputMask, чтобы сохранить значение вашей модели в чистоте:

 <p-inputMask mask="(999) 999-9999" formControlName="phone" 
   inputStyleClass="form-control"
   [unmask]="true"
   [style]="{'width': '100%','height':'34px'}" id="phoneId"
   placeholder="Phone (required)">
 </p-inputMask>

Обновление : после игры немного больше, я заметилp-inputMask не поддерживает другие валидаторы, он предоставляет только атрибут required, даже если вызывается пользовательский валидатор, сам элемент управления останется действительным.