角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总是返回用于反应性表单的空数组。

正如您在上面的示例中所看到的，formControlName="name"在这里有两个验证器，minlength和pattern。现在，除非您开始在此输入中写入，否则FormControl的错误对象为null。

因此，如果有人能帮助我理解ReactiveForms是如何工作的(验证)，或者它存储在哪里，那么它的所有验证器都会非常感激。

谢谢

Answer 1

从文件

FormControl构造函数接受三个可选参数:初始数据值、验证器数组和异步验证器数组。

所以你把你的验证器放在一个数组里。您可以事先将它赋值给一个变量，然后在其他地方得到它。喜欢

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

Answer 2

不确定这是否是您想要的，但是AbstractControl上的AbstractControl属性返回一个由所有验证逻辑组成的函数。如果调用该函数并传入要验证的控件，它将应用所有验证，并返回一个对象，其中包含每个失败验证器的信息，如果没有验证器失败，则返回null。

例如，在带有minlength="3“验证器的输入中，当您只输入两个字符时，以下是返回值：

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

而当所需的验证程序失败时，它将返回以下内容：

{"required": true}