Question

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

Answer 1

据我了解，验证的工作方式如下：

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

如罗宾·迪克霍夫（Robin Dijkhof）所述，1 2 3不是数字而是一个字符串-这就是为什么您的<input type="number"/>不允许这样做。

我个人想知道的是，为什么要允许1 2 3来显示无效的表单错误？最后，这是拥有type="number"之类的html标准的关键，因为这样浏览器可以从您那里进行验证。

如果我不能正确理解用例，而您必须以这种方式实施，那么我可以想到以下一种方法：

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

Answer 2

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

但是，您需要将输入类型默认更改为文本，type =“ number”将自动切出所有非半角数字/字符。

用于过滤出全长数字的正则表达式为：

[\uFF10-\uFF19]

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

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

unicode标准还允许您通过FEE0减去每个字符代码，以将“全宽度自”转换为标准ASCII格式。请注意，它仅适用于[\ uFF01- \ uFF5E]范围内的char。

用户输入全数字时如何显示错误

2 个答案: