我正在创建一个组件,我需要列出输入的所有验证规则 .
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. 的 property
但我注意到 _rawValidators 总是为Reactive表单返回空数组 .
正如您在上面的例子中看到的那样 formControlName="name" 在这里有两个验证器 minlength 和 pattern . 现在,除非您开始在此输入中写入,否则 FormControl 的errors对象为null .
因此,如果有人可以帮助我理解ReactiveForms如何工作(验证)或者它存储所有验证器的位置会非常明显 .
谢谢
2 回答
不确定这是否是您正在寻找的,但
AbstractControl
上的validator
属性返回一个由所有验证逻辑组成的单个函数 . 如果调用该函数并传入要验证的控件,它将应用所有验证并返回包含有关失败的每个验证器的信息的对象,如果没有验证器失败则返回null
.例如,在带有
minlength="3
“验证器的输入上,以下是仅输入2个字符时的返回值:当必需的验证器失败时,它返回以下内容:
从文档
所以你在数组中有验证器 . 您可以事先将其分配给变量并在其他任何地方获取 . 喜欢