时间戳

首页 > 解决方案 > 当用户输入完整的数字时如何显示错误

angular - 当用户输入完整的数字时如何显示错误

问题描述

我有一个角度/材料形式，我有一个输入类型number。

由于我在亚洲，用户可以输入全角数字，但我想显示“仅半角”的错误。

我做了以下

零件

const CustomValidator = {
  fullWidthNumber(control: AbstractControl): ValidationErrors | null {
    console.log(control.value);
    return control.value.toString().match(/[\uff00-\uff9f]/) ? { fullWidth: true } : null;
  },
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit {
  title = 'MyShopApp';

  public altitudeControl: FormControl;

  constructor() { }

  ngOnInit() {
      this.altitudeControl = new FormControl(2, [
        Validators.required,
        Validators.min(5),
        Validators.max(10),
        CustomValidator.fullWidthNumber,
      ]);
  }
}

模板

<form (ngSubmit)="altitudeControl.valid && setHeight(altitudeControl.value)">
    <mat-form-field class="full-width">
        <mat-label>{{ "ALTITUDE"  }}</mat-label>
        <input matInput [formControl]="altitudeControl" name="altitude" type="number" />
        <mat-error *ngIf="altitudeControl.hasError('max')">
            ERROR.FIELD.MAX
        </mat-error>
        <mat-error *ngIf="altitudeControl.hasError('min')">
            ERROR.FIELD.MIN
        </mat-error>
        <mat-error *ngIf="altitudeControl.hasError('fullWidth')"> ERROR.FIELD.FULL_WIDTH </mat-error>
        <mat-error *ngIf="altitudeControl.hasError('required')">
            ERROR.FIELD.REQUIRED
        </mat-error>
    </mat-form-field>
</form>

问题是，当我添加一个像１２３这样的完整数字时，内容被删除，并且永远不会触发错误。

我怎样才能实现它？

堆栈闪电战

标签： angularvalidationangular-material

解决方案

据我了解，验证是这样工作的：

  • 1 2 3 => 无效
  • 123 => 有效

正如 Robin Dijkhof 所提到的， 1 2 3 不是一个数字，而是一个字符串——这就是你<input type="number"/>不允许它的原因。

我个人想知道的是为什么您要允许 1 2 3，然后显示无效的表单错误？最后，这就是拥有 html 标准的意义所在，type="number"因为这样浏览器可以从您那里获得验证工作。

如果我没有正确理解用例，并且您必须以这种方式实现它，那么我可以想到一种方法：

  • 将您的输入更改为type="text"
  • 编写自定义验证器：
    • fullWidthNumber 用于字符串化数字
    • 字符串化数字的最小长度
    • 字符串化数字的最大长度

推荐阅读