Angular 2（响应式表单）在表单控件中列出所有验证规则（如模式、最小长度、最大长度）是否在错误对象中

Question

我正在创建一个组件，我需要在其中列出输入的所有验证规则。

home.component.html

<input-validation>
   <input type="text" class="form-control" formControlName="name">
</input-validation>

home.component.ts

export class HomeComponent implements OnInit {
    public myForm: FormGroup;

    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this._fb.group({
            name: ['', [ <any>Validators.minLength(5), <any>Validators.pattern('^[0-9]*$')]],
            address: this._fb.group({
                street: ['', <any>Validators.required],
                postcode: ['8000']
            })
        });

    }
}

对于我正在使用的模板驱动表单

_rawValidators

属性 FormControlName.

但我注意到 _rawValidators 总是 returns 响应式表单的空数组。

正如你在上面的例子中看到的那样 formControlName="name" 这里有两个验证器 minlength 和模式。现在，除非您开始在此输入中写入，否则 FormControl 的 errors 对象为空。

因此，如果有人能帮助我了解 ReactiveForms 的工作原理（验证）或它存储所有验证器的位置，那将是非常值得赞赏的。

谢谢

Answer 1

来自文档

A FormControl constructor accepts three, optional arguments: the initial data value, an array of validators, and an array of async validators.

所以你有一个数组中的验证器。您可以预先将其分配给一个变量并在其他任何地方获取它。喜欢

this.validator1 = [ Validators.minLength(5), Validators.pattern('^[0-9]*$')]
...
console.log(this.validator1);

Answer 2

不确定这是否是您要查找的内容，但是 AbstractControl return 上的 validator 属性是一个由所有验证逻辑组成的函数.如果调用该函数并传入要验证的控件，它将应用所有验证和 return 一个对象，其中包含有关每个失败验证器的信息，或者 null 如果没有验证器失败。
例如，在带有 minlength="3" 验证器的输入上，以下是仅输入 2 个字符时的 return 值：

{"minlength":{
    "requiredLength":3,
    "actualLength":2
  }
}

而当必需的验证器失败时，它 return 如下：

{"required": true}

Angular 2（响应式表单）在表单控件中列出所有验证规则（如模式、最小长度、最大长度）是否在错误对象中

Angular 2 (Reactive forms) Listing all validation rules (like pattern, minlength, maxlength) in a form control whether or not in an error object

angular

angular-reactive-forms