Angular 4验证器可同时检查2个控件 [英] Angular 4 validator to check 2 controls at the same time

问题描述

我有一个反应式表单，带有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 is what I tried so far:

[...]
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个控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！