设置角度指令的误差，以控制角度 4

Question

我已经将一个指令从angular js迁移到angular 4，它格式化并验证电话号码。在角度js中，我使用以下代码将错误设置为该控件的形式：

ngModelCtrl.$parsers.push(function (viewValue) {
if (viewValue && viewValue.toString().length != 0 && viewValue.toString().length < 14) {
ngModelCtrl.$setValidity('phnLen', false);
} else {
ngModelCtrl.$setValidity('phnLen', true);
}
return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
});

但是在 Angular 4 中，我无法找到一种方法来通知表单有关该控件的错误。这样我们在form.valid属性中就有了正确的值。任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

您可以创建自己的自定义验证器并将其附加到FormControl验证器，就像我们在 AngularJS 中附加验证器一样。

import { Directive } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
function validatePhone(c: FormControl) {
const viewValue = c.value;
return viewValue && viewValue.toString().length != 0 && viewValue.toString().length < 14) ? null: {
phnLen: {
valid: false
}
}
}
@Directive({
// for template driven form with ngModel
selector: '[validatePhone][ngModel]',
// for model driven form with formControlName
//selector: '[validatePhone][formControlName]',
providers: [
{ provide: NG_VALIDATORS, useValue: validatePhone, multi: true }
]
})
export class PhoneValidator {} // Add this directive in declarations.

在使用方面，您可以像下面这样使用它

<input type="tel" name="phoneNumber" ngModel validatePhone>
//OR
<input type="tel" formControlName="phoneNumber" validatePhone>