[英]Angular Firebase Expected validator to return Promise or Observable
[英]Angular Custom Validator Error (Expected validator to return Promise or Observable)
我為電話領域寫了一個自定義驗證器
錯誤
期望驗證者返回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('')],
});
我錯過了什么?
編輯 :您只需要將您的驗證器包裝在一個數組中。
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
屬性,即使調用了您的自定義驗證器,控件本身也將保持有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.