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

【问题标题】：How to show error when user input full with number当用户输入完整的数字时如何显示错误
【发布时间】：2020-10-25 08:29:33
【问题描述】：

我有一个角度/材料形式，我有一个输入类型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>

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

我怎样才能实现它？

Stackblitz

【问题讨论】：

您可能想要添加一些您希望有效/无效的半角和全角示例。我们中有些人对此并不熟悉。
１２３ => 无效 123 => 有效
在你的 Stackblitz 中没有机会输入 1 2 3，因为它不是数字。
这是我的问题，我该怎么办？
inputType="number" 显然只接受数字。 “1 2 3”不是数字。我认为您应该删除 inputtype 并编写自己的允许“1 2 3”的验证器

标签： angular validation angular-material

【解决方案1】：

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

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

正如 Robin Dijkhof 所说，1 2 3 不是数字而是字符串 - 这就是为什么您的 <input type="number"/> 不允许这样做。

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

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

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

【讨论】：

【解决方案2】：

我想我理解您为什么要这样做，因为很多人不知道为什么他们在输入全角数字时输入不起作用。要解决此问题，您需要编写自定义转换器或检查。（比如对每个全宽数字使用 switch 语句，或者使用范围检查是否使用 unicode，参见this wiki for the code id）

但是，您需要将输入类型默认更改为文本，type="number" 会自动删除所有非半长数字/字符。

过滤掉全长数字的正则表达式是：

[\uFF10-\uFF19]

其中[\uFF10]是“０”，[\uFF19]是“９”。请注意，在较新的版本中，您可以像这样直接输入：

[０-９] //ONLY WORK IN NEWER VERSIONS

unicode 标准还允许您将每个字符代码减去 FEE0，以将 Full Width From 转换为标准 ASCII 格式。请注意，它仅适用于 [\uFF01-\uFF5E] 范围内的字符。

【讨论】：