Question

我有一个Angular 2项目，有两个输入字段，大于和小于。我想检查以确保用户输入的过滤器之间不会互相矛盾的有效值，并且我希望在前端动态地执行此操作，而无需用户提交表单。

具体来说，我想确保＆＃34;大于＆＃34;大于＆＃34;输入不大于＆＃34;小于＆＃34;内的值。领域。

我该怎么办？

<form (submit)="onSubmit()" id="inputForm" class="form-group" class="row">

        <h3>Price Filters</h3>

        <span>Greater than:</span>
        <input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" placeholder="0">

        <span>Less than:</span>
        <input type="number" name="lessThanValue" [(ngModel)]="lessThanValue">

        <input type="submit">

    </form>

Answer 1

您可以使用ngModelChange通知更改

<强> HTML：

<input type="number" name="greaterThanValue" [(ngModel)]="greaterThanValue" (ngModelChange)="onChange($event)" placeholder="0">
<span>Less than:</span>
<input type="number" name="lessThanValue" [(ngModel)]="lessThanValue" (ngModelChange)="onChange($event)">

<强> app.ts：

public onChange(event: any): void {
    if (this.greaterThanValue > this.lessThanValue) {
      console.log('Incorrect');
      this.greaterThanValue = this.lessThanValue - 1;
    }
}

更新：如果您只想显示消息而不是调整值，则可以设置标记并根据标记值显示内容，

<div style="color: red" *ngIf="isInvalid">Please check your ranges</div>

public onChange(event: any): void {
    this.isInvalid = this.greaterThanValue > this.lessThanValue;
}

Demo

如何比较表格中的两个输入？ Angular 2表单验证

1 个答案: