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

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

• 两者都必须有一个值
• 它们的值必须介于 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)]));
[...]

这是自定义验证器函数：

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 };
  };
}

除了这个问题之外，这工作正常：

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

我知道问题是每次更改另一个字段的值时都需要重新检查关联字段，但我不知道该怎么做。

有任何想法吗？谢谢，

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

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 } );
  }
}

现场演示 https://stackblitz.com/edit/angular-gupqvu