Question

如果我的问题微不足道，请事先谅解，但我目前正在Angular迈出第一步。我花了很多时间进行搜索，但无济于事，因此我们将不胜感激。

在我组件的ngOnInit中，我使用formBuilder创建了一个反应形式。我的最小，最大表单控件都被分配了必需的验证器，并且还共享了组验证器“ minMaxValidator”。

ngOnInit(){
    // initialize myForm
    this.myForm = this.formBuilder.group({
        max: [null, [Validators.required]],
        min: [null, [Validators.required]],
    },
    {
        validator: this.formValidationService.minMaxValidator
    })

}

formValidationService中的minMaxValidator看起来像这样：

minMaxValidator(control: AbstractControl): { [key: string]: any } {
    let minControl = control.get('min');
    let maxControl = control.get('max');

    if (maxControl.value <= minControl.value) {
        // add ng-invalid class to min & max controls
        minControl.setErrors({ 'invalidMinMax': true });
        maxControl.setErrors({ 'invalidMinMax': true });
        return { 'invalidMinMax': true };
    } else {
        // remove ng-invalid class from min & max controls
        minControl.setErrors(null);
        maxControl.setErrors(null);
        return null;
    }
}

上述实现方式最严重的问题是，当min字段为空时，所需的验证程序似乎没有触发，因此我没有收到任何错误消息（表单状态仍然有效，并且min的错误对象为null）。如果对minMaxValidator进行注释，则不会发生这种情况。为什么？

这是我的模板。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" #form="ngForm">
  <label for="limitMin">Min Limit</label>
  <input formControlName="min" id="limitMin" class="form-control" type="number">
  <validation-message [control]="myForm.controls.min" [isFormSubmitted]="form.submitted"></validation-message>
</form

将组验证器添加到formBuilder

0 个答案: