我可以在 Angular 上为 Mask 设置最大值和最小值吗？

Question

好吧，我有两个输入字段，一个用于纬度，另一个用于经度，我想在上面加上一个掩码，所以用户只能输入合理的值，我想为其设置一个最大值和最小值并在末尾添加º。但我不想设置用户可以输入的数字，所以我有点不知所措。有人可以帮我解决这个问题吗？

这是我制作的两个输入字段：

<input placeholder="{{ module.longitude }}" id="i-long" 
[(ngModel)]="module.longitude" required name="long">

<input placeholder="{{ module.latitude }}" id="i-lat" 
[(ngModel)]="module.latitude" required name="lat"><br>

Answer 1

使用maxlength和minlength

像这样：

<input placeholder="{{ module.longitude }}" id="i-long" 
[(ngModel)]="module.longitude" required name="long" maxlength = "10" minlength = "1">

您可以在末尾使用 º，例如使用图像或图标。

Answer 2

您可以通过创建 Angular 指令并使用 HostListener 来监视输入字段中的变化来实现。

通过使用 HostListener，您可以控制输入字段的最大值和最小值，并在末尾添加 º 符号，如下例所示：

 @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value);
  }

  onInputChange(event) {
    let newVal = event.replace(/\D/g, '');
    console.log(newVal);
    if (newVal > 0) {
      newVal = newVal + 'º';
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }

创建指令后，您应该将其绑定到输入字段。

 <form [formGroup]="form">
      <div class="form-group">
        <label for="longitude">Longitude</label>

        <input
          class="form-control"
          type="text"
          appLongitudeMask
          formControlName="longitude"
          id="longitude"
        />
      </div>
</form>

请查看它的 stackblitz 示例： https://stackblitz.com/edit/angular6-mask-ftsvf6 希望对你有帮助。

我可以在 Angular 上为 Mask 设置最大值和最小值吗？

Can I set a max and min value to a Mask on Angular?

mask

latitude-longitude

angular-directive

angular