用于验证纬度和经度的 Angular 指令答案

【问题标题】：Angular Directive for validating latitude and longitude用于验证纬度和经度的 Angular 指令
【发布时间】：2019-08-29 11:37:06
【问题描述】：

我正在使用一个生成不同类型报告的应用程序。

在几个报告中，我们使用经度/纬度作为输入框。我们需要为纬度/经度添加一些验证逻辑，例如纬度必须是 -90 到 90 之间的数字，经度必须是 -180 到 180 之间的数字。

那么最适合的方法是什么？我应该为相同的想法或任何其他想法创建指令吗？

在指令的情况下，如果有人可以共享一些代码，那么它会很有帮助。

【问题讨论】：

标签： angular7 angular2-directives

【解决方案1】：

取决于您希望如何处理...从技术上讲，HTML5 已经可以做到这一点

<input type="number" name="longtitude" min="-180" max="180">

<input type="number" name="latitude" min="-90" max="90">

但是，如果您有更多字段要限制上限和下限，您当然可以使用指令。这样做有几个好处。我们可以对组件的使用方式施加更多控制。纯 HTML5 解决方案有一个缺点，即您仍然可以输入大于这些数字的数字。

编辑：我还为您创建了一个指令，在 HTML 模板中看起来有点像这样...

<input #inputReference appNumberRange [inputRefObject]="{inputRef: inputReference, minValue: -180, maxValue: 180}" type="number"
            placeholder=" - Longitude- ">

那么，这里发生了什么？我创建了一个名为 NumberRange 的指令，它的输入参数“inputRefObject”在本例中采用模板变量#inputReference，即最小值和最大值。

但是现在让我们转到指令...

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appNumberRange]'
})
export class NumberRangeDirective {

  constructor() { }

  @Input() inputRefObject: {inputRef: any, minValue: number, maxValue: number};

  @HostListener('keyup', ['$event'])
  restrictNumberRange() {

    const {inputRef, minValue, maxValue} = this.inputRefObject;

    if(inputRef.value > maxValue) {
      inputRef.value = maxValue;
    } else if(inputRef.value < minValue) {
      inputRef.value = minValue
    } else {
      // Do nothing, or perhaps do something else...
      return;
    }
  }
}

它保持相当简单，我不会在这里保证最佳实践，但它应该做你希望它做的事情。我们在使用 keyup 事件的对象上使用 hostlistener。从技术上讲，我什至不需要在 HostListener 参数中传递事件，但我把它留在那里以备不时之需。但是，是的，如果数字大于最大数字，则输入中的值将更改为允许的最高输入，反之亦然。从那里你基本上可以扩展你喜欢的方式。您也许可以检查输入是否实际上只是数字类型！您可以在将某些内容粘贴到输入等时检查该值

【讨论】：