比较 2 个输入字段的值以验证 Angular 中的表单 7 通过模板

Question

我在转向 Angular 7 的第一周，我一直在使用基于模板的基本验证在我的项目中制作基本表单，但我现在需要基于一个字段的值必须高于另一个

我已经尝试在组件控制器中使用这些值本身，但是虽然我能够确认这些值是否有效，但我无法使用此代码向用户显示问题所在

if (issueThresholdForm.value.lowScore > issueThresholdForm.value.highScore) {
  // Show user error
  // This is the messing part, I guess
}

这是我正在使用的模板

<div *ngIf="_issueCategory">
  <form (submit)="submitIssueThreshold(issueThresholdForm)" #issueThresholdForm="ngForm">
    <mat-form-field class="half-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.highScore'"></mat-label>
      <input name="highScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.highScore"
        required #highScore="ngModel">
    </mat-form-field>
    <mat-form-field class="half-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.lowScore'"></mat-label>
      <input name="lowScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.lowScore"
        required #lowScore="ngModel">
    </mat-form-field>
    <mat-form-field class="full-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.description'"></mat-label>
      <textarea name="description" matInput [(ngModel)]="_issueCategory.thresholdDescription">
            </textarea>
    </mat-form-field>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" [translate]="'modal-confirm.cancel'"></button>
      <button type="submit" class="btn btn-primary primary" [disabled]="issueThresholdForm.invalid || issueThresholdForm.pristine" [translate]="'modal-confirm.submit'"></button>
    </div>
  </form>
</div>

Answer 1

您可以按如下方式使用Custom Validations in Reactive Forms。

HTML

<div>
  <form [formGroup]="myForm">

    <label>Low Score: </label>
    <input formControlName="lowScore" type="number">
    <br/><br/>
    <label>High Score: </label>
    <input formControlName="highScore" type="number">

    <div>
      <span style="color: red" *ngIf="myForm.get('highScore').touched && myForm.get('highScore').hasError('higherThan')">High score should be higher than lower score.</span>
    </div>

  </form>
</div>

TS

export class AppComponent  {
  myForm: FormGroup;

  constructor() {

    this.myForm = new FormGroup({
      highScore: new FormControl(0, [this.lowerThan('lowScore')]),
      lowScore: new FormControl(0, null)
    });
  }
  lowerThan(field_name): ValidatorFn {

    return (control: AbstractControl): { [key: string]: any } => {

      const input = control.value;

      const isLower = control.root.value[field_name] >= input;

      return isLower ? {'lowerThan': {isLower}}: null;
    };
  }
}

找工作StackBlitz Here.

Answer 2

编辑：

以反应方式使用相同的解决方案进行编辑。所以创建表单组并添加附加到表单组的自定义验证器：

_issueCategory = { lowScore: 1, highScore: 2 };

issueThresholdForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.issueThresholdForm = this.fb.group({
    highScore: [this._issueCategory.highScore, [Validators.required]],
    lowScore: [this._issueCategory.lowScore, [Validators.required]]
  }, { validators: validateScore })
}

验证器函数：

export function validateScore(
  control: AbstractControl
): ValidationErrors | null {
  if (control && control.get("highScore") && control.get("lowScore")) {
    const highscore = control.get("highScore").value;
    const lowscore = control.get("lowScore").value;  
    return (lowscore > highscore) ? { scoreError: true } : null
  }
  return null;
}

然后你可以删除 ngModel（重要！），因为它们不应该与反应形式混合。您还可以删除表单的所有验证，例如 required，因此最终输入看起来很简单：

<input type="number" matInput placeholder="0" formControlName="lowScore">

STACKBLITZ

原文：

我强烈，强烈建议Reactive forms，一开始他们可能会感到困惑，但完全值得。您可以更好地控制表单，正如 Nithin Kumar Biliya 在评论中提到的那样，单元测试更容易。

话虽这么说....

这是一个使用模板驱动表单的解决方案，因为这正是您当前正在使用的。

你可以创建一个附加到表单标签的指令，在该指令中有一个验证器来比较 highscore 和 lowscore 的值并将错误附加到表单，或者 return null（在表格中被认为是有效的）。所以验证器看起来像这样：

import { Directive } from "@angular/core";
import {
  AbstractControl,
  NG_VALIDATORS,
  Validator,
  ValidationErrors
} from "@angular/forms";

@Directive({
  selector: "[scoreValidation]",
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ScoreValidatorDirective,
      multi: true
    }
  ]
})
export class ScoreValidatorDirective implements Validator {
  constructor() {}

  // here control is the formgroup
  validate(control: AbstractControl): ValidationErrors | null {
    if (control && control.get("highScore") && control.get("lowScore")) {

      // the form controls and their value
      const highscore = control.get("highScore").value;
      const lowscore = control.get("lowScore").value;

      // not valid, return an error
      if (lowscore > highscore) {
        return { scoreError: true };
      }
      // valid
      return null;
    }
    // form controls do not exist yet, return null
    return null;
  }
}

将指令添加到您的应用程序模块中的声明数组，只需将此指令附加到表单标签即可使用它：

<form .... scoreValidation>

并且可以使用 *ngIf="issueThresholdForm.hasError('scoreError')

显示错误

STACKBLITZ

Answer 3

我强烈推荐响应式表单，但如果你想这样做，你可以：

将以下p tag放在低分输入下面：

<p class="text-danger" [hidden]="(lowerScore.value > higerScore.value ? false: true) || (lowScore.pristine && !issueThresholdForm.submitted)">
                    The lower scrore can not be greater than higer score
</p>

比较 2 个输入字段的值以验证 Angular 中的表单 7 通过模板

Compare the values of 2 input fields to validate the form in Angular 7 through the template

angular

typescript

angular-validation