了解 angular4 中验证 class 中的静态方法

Question

我开始学习 angular 中的模型驱动表单，当我浏览模型驱动表单的文档时，我发现了这个

component.ts

 this.myForm= this.fb.group({
      'contact':['',Validators.required]
    });

现在，当我转到验证器的定义时 class 我发现了这个

export declare class Validators {
...
static required(control: AbstractControl): ValidationErrors | null;
...
}

这说明 验证器 中需要一个静态方法 class 并且它需要一个 AbstractControl 作为参数。但是为什么我可以在不传递任何参数的情况下使用它。

Answer 1

所需的方法 returns 带有 'required' 属性的错误映射：{'required':true} 如果 control: AbstractControl 的值为空且 null 如果不是。

.

来自angular源代码： https://github.com/angular/angular/blob/6.1.9/packages/forms/src/validators.ts#L133-L154

static required(control: AbstractControl): ValidationErrors|null {
    return isEmptyInputValue(control.value) ? {'required': true} : null;
  }

.

之所以可以不带括号和参数传递Validators.required，是因为Typescript是Javascript的超集，可以将函数存储为变量：

var Foo = function (control: AbstractControl)
{
  return anyVal;
};

等同于：

Foo(control: AbstractControl): any
{
  return anyVal;
};

所以这样做是完全有效的

var Bar = Foo;

并且由于函数只是一个保存可执行代码的变量，我们可以将函数存储在多个变量中或将其作为参数传递，这就是在 FormControl 中所做的。

所以基本上，当你这样做时

const control = new FormControl('', Validators.required);

你没有执行要求的方法，因为一个方法只有在加上括号和参数时才会执行。相反，您传递的是 Validator 函数本身。

Understanding static methods inside the Validation class in angular4