首页 文章

Angular 2(Reactive forms)在表单控件中列出所有验证规则(如pattern,minlength,maxlength)是否在错误对象中

提问于
浏览
1

我正在创建一个组件,我需要列出输入的所有验证规则 .

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" 在这里有两个验证器 minlengthpattern . 现在,除非您开始在此输入中写入,否则 FormControl 的errors对象为null .

因此,如果有人可以帮助我理解ReactiveForms如何工作(验证)或者它存储所有验证器的位置会非常明显 .

谢谢

2 回答

  • 0

    不确定这是否是您正在寻找的,但 AbstractControl 上的 validator 属性返回一个由所有验证逻辑组成的单个函数 . 如果调用该函数并传入要验证的控件,它将应用所有验证并返回包含有关失败的每个验证器的信息的对象,如果没有验证器失败则返回 null .
    例如,在带有 minlength="3 “验证器的输入上,以下是仅输入2个字符时的返回值:

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

    当必需的验证器失败时,它返回以下内容:

    {"required": true}
    
  • 0

    从文档

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

    所以你在数组中有验证器 . 您可以事先将其分配给变量并在其他任何地方获取 . 喜欢

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

相关问题