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

发布时间：2020-12-17 17:05:20 所属栏目：安全来源：网络整理

导读：我有一个带有2个控件(port_start和port_end)的反应式表单,它们具有以下要求：两者都必须有价值它们的值必须介于0到65535之间 port_start值必须小于port_end值这是我到目前为止所尝试的： [...]this.formModel.addControl('port_start',new FormControl(ob

我有一个带有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,'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’显示为无效,尽管现在它是正确的.

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

有任何想法吗？谢谢,

解决方法

min,max和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.max(65535)]],portEnd: [null,Validators.max(65535)]]
    },{ validator: portStartEnd } );
  }
}

Live demo

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!