我有一个带有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 } );
}
}
