4

请在 此处参考 stackblitz 中的项目。

可以看出，我有控件的反应形式firstNumber，secondNumber和thirdNumber。我需要对表单控件进行验证thirdNumber，使其值不应大于在firstNumber和之间具有最小值的表单控件的值secondNumber。

validateThirdNumber每当表单控件更改时，组件中的自定义验证器都可以正常工作thirdNumber，但是我需要对表单控件的更改进行验证，firstNumber因为secondNumber验证逻辑可以根据表单控件的更改 firstNumber和secondNumber.

为此，我添加了一个更改表单控件的事件，firstNumber并且secondNumber我将表单控件标记thirdNumber为touched但似乎没有触发其验证。

那么，如何对表单控件thirdNumber的更改和表单控件firstNumber进行验证secondNumber？

此外，即使在绑定到其this.myFormGroup表单控件声明并app.componen.ts在?line:22thisthis.myFormGroupconstructor

4

2 回答 2

1

您最好的选择是创建您自己的自定义全局验证器。

class ValidateThirdNumber {
    static validate(control: AbstractControl) {
          console.log(control);
        if(control) {
           const firstNumber = control.get('firstNumber').value;
           const secondNumber = control.get('secondNumber').value;
           const thirdnumber = control.get('thirdNumber').value;
        if (firstNumber > secondNumber) {
          if (thirdnumber > secondNumber) {
            control.get('thirdNumber').setErrors( {greaterThanSecondNumber: true} );   
          }
        } else if (firstNumber < secondNumber) {
          if (thirdnumber > firstNumber) {
              control.get('thirdNumber').setErrors( {greaterThanFirstNumber: true} ); 
          }
        }
        }
        return null;
        }
}

表单组的初始化应该是：

 this.myFormGroup = this.fb.group({
      firstNumber: [0],
      secondNumber: [0],
      thirdNumber: [0]
    }, {validator: [ValidateThirdNumber.validate] });

你不再需要touched属性

<span *ngIf="myFormGroup.get('thirdNumber').errors?.greaterThanFirstNumber">
  Third number cannot be greater than First Number
 </span>
    <span *ngIf=" myFormGroup.get('thirdNumber').errors?.greaterThanSecondNumber">
  Third number cannot be greater than Second Number
 </span>

你也不需要(change)事件删除它们

于 2019-04-18T08:42:57.503 回答
0

如果您想使用它，我创建了一个更简单的选项。没有使用表单控件验证。

<div>

    <form [formGroup]="myFormGroup" #formRef="ngForm">

        First number:<input #firstNum type="number" formControlName="firstNumber"><br/>

  Second number:<input #secondNum type="number" formControlName="secondNumber"><br/>

  Third number:<input #thirdNum type="number" formControlName="thirdNumber"><br/>

    <span *ngIf="firstNum && thirdNum && (thirdNum.value > firstNum.value)">
  Third number cannot be greater than First Number
 </span>
 <hr>
    <span *ngIf="secondNum && thirdNum && (thirdNum.value > secondNum.value)">
  Third number cannot be greater than Second Number
 </span>

</form>


</div>

并删除文件中的所有验证.ts。

如果您开始创建更大的组件，那么表单验证选项将是最好的。

于 2019-04-18T08:51:43.573 回答