Question

当输入为空时，不会出现错误。

原因是NumberValueAccessor选择器与输入匹配，并将Control的值设置为数字。如果输入的输入字符串与数字不匹配，则值为NaN。空字符串就是这种情况。但是，仅当控件值为空（空或未定义）或为空字符串时，必需的验证器才会返回错误。这不是这两个条件中的任何一个的情况，因为NumberValueAccessor将值设置为NaN数。

所需的验证器无法真正验证NaN值，因为它可以显示为空字符串，也可以显示为非数字的字符串（如“aaa”）。问题是验证器无法从控制变量中检索输入的字符串。

引自https://github.com/angular/angular/issues/6932

我仍然面临这个问题。 Angular2中有没有解决方案

Answer 1

您始终可以实施自己的requiredNumber指令来应用。

唯一特别之处在于它明确地寻找未被初始化的null control.value将在数字输入上设置。

<强>所需-number.validator.ts

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator, Validators, ValidatorFn } from '@angular/forms';

function validateRequiredNumberFactory() : ValidatorFn {
  return (control: AbstractControl) => {
    let isValid = !isNaN(control.value) && control.value !== null;
    console.log('isNaN: ' + isNaN(control.value));

    if(isValid) {
      return null;
    }
    return { numberIsRequired: true };
  }
}

@Directive({
  selector: '[requiredNumber][ngModel]',
  providers: [{provide: NG_VALIDATORS, useExisting: RequiredNumberValidatorDirective, multi: true}]
})
export class RequiredNumberValidatorDirective implements Validator, OnChanges {
  private valFn = Validators.nullValidator;

  constructor() {
    this.valFn = validateRequiredNumberFactory();
  }

  validate(control: AbstractControl): {[key: string]: any} {
    return this.valFn(control);
  }
}

因此输入：

<input requiredNumber name="someName" [(ngModel)]="myProperty" #namedInput="ngModel"/>

这是一个可以根据自己的喜好进行调整的傻瓜http://plnkr.co/edit/gxTxOQBg8ilFHzgq4Ly0

归功于它的到期，这个答案来自：http://juristr.com/blog/2016/11/ng2-template-driven-form-validators/

因为我主要在代码中和模板外部使用Reactive Forms和我的验证器。

必需的验证器不适用于号码

1 个答案: