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 总是为Reactive表单返回空数组。

正如您在上面的例子中看到的那样 formControlName =＆＃34; name＆＃34; 在这里有两个验证器 minlength 和 pattern 。现在，除非您开始在此输入中写入，否则 FormControl 的错误对象为空。

因此，如果有人能帮助我理解ReactiveForms如何工作（验证）或者它存储所有验证器的位置会非常明显。

由于

Answer 1

来自文档

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

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

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

Answer 2

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

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

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

{"required": true}

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

2 个答案: