Angular 4 验证器同时检查 2 个控件

问题描述

我有一个带有 2 个控件(port_start 和 port_end)的反应式表单，它们具有以下要求:

I have a reactive form with 2 controls (port_start and port_end) that have the following requirements:

• 两者都必须有一个值
• 它们的值必须在 0 到 65535 之间
• port_start 值必须小于 port_end 值

这是我目前尝试过的:

[...]
this.formModel.addControl('port_start',
  new FormControl(object.port_start ? object.port_start : 0,
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));

this.formModel.addControl('port_end',
  new FormControl(object.ort_end ? object.port_end : 0,
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));
[...]

这是自定义验证器函数:

This is the custom validator function:

minMaxValidator = function(startControl : string, endControl : string): ValidatorFn {
  return (control: FormControl): {[key: string]: any} => {
    let valid = true;
    let valStart = 0;
    let valEnd = 0;

    if(this.formModel.controls[startControl] && this.formModel.controls[endControl]) {
      valStart = <number>this.formModel.controls[startControl].value;

      valEnd = <number>this.formModel.controls[endControl].value;
    }

    valid = valEnd >= valStart;

    return valid ? null : { minmax : true };
  };
}

除了这个问题外，这很好用:

This works fine except for this problem:

• 假设我在port_start"字段中输入2".Angular 将其标记为无效，因为它大于 'port_end' 的值(默认为 0).如果我在port_end"字段中键入5"，应用程序仍将port_start"显示为无效，尽管现在它是正确的.

我了解问题是每次更改对方的值时都需要重新检查关联字段，但我不知道该怎么做.

I understand that the problem is that I need to re-check the associated field each time I change the other one's value, but I don't know how to do it.

有什么想法吗?谢谢，

推荐答案

min、max 和 required 验证器可以保持原样.如果要根据另一个控件的值来验证一个控件，则需要将验证提升到父控件.

The min, max and required validators can be kept as is. If you want to validate one control based on the value of another, you need to lift the validation to the parent control.

import { Component } from '@angular/core';
import { ValidatorFn, FormBuilder, FormGroup, Validators } from '@angular/forms';

const portStartEnd: ValidatorFn = (fg: FormGroup) => {
   const start = fg.get('portStart').value;
   const end = fg.get('portEnd').value;

   return start && end && start < end ? null : { startEnd: true };
}

@Component({
  selector: 'my-app',
  template: `
   <input [formControl]="form.get('portStart')" type="number" >
   <input [formControl]="form.get('portEnd')" type="number" >

   {{ form.valid }}
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      portStart: [null, [Validators.required, Validators.min(0), Validators.max(65535)]],
      portEnd: [null, [Validators.required, Validators.min(0), Validators.max(65535)]]
    }, { validator: portStartEnd } );
  }
}

现场演示

这篇关于Angular 4 验证器同时检查 2 个控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！