Question

我已将指令从angular js迁移到angular 4，该指令格式化并验证了电话号码。在angular 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);
        });

但是在角度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>

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

1 个答案: