Question

在angularjs中：

<form name="f" novalidate>
<input type="number" ng-model="x" name="x">
</form>

<div ng-if="f.x.$error.number">NaN</div>

我可以在Angular中得到吗？

例如<input type="number">在Angular7中有效，输入的是'eee'。

<input type="number" required>如果输入为'eee'则无效，但对于”也无效。

编辑

据我所知，如果我尝试添加一些验证器-在“非数字”值的情况下，它将收到空值。

编辑2

Prolly将使用以下解决方法：

nativeNumber(element: ElementRef):ValidatorFn {
        return () => {
            return element.nativeElement.validity.valid ? null : {'number': true};
        }
    }

Answer 1

我想使用FormGroup和FormBuilder验证表单。

Angular 7 HTML：

<form [formGroup]="myFormGroup">
  <input type="number" ng-model="x" name="x" 
   formControlName="myInputField">
</form>

打字稿：

public myFormGroup: FormGroup;
constructor(private formBuilder: FormBuilder, ...) {
  this.myFormGroup = this.formBuilder.group({
    myInputField: ['', [Validators.required, 
    Validators.pattern('^\\d*$')]]
  });
}

因此它立即生效。希望我能帮上忙。

Answer 2

您可以通过添加Angular验证程序来解决此问题，

“必需”已有一个：Angular Form Validation

您可以使用pattern并传递正则表达式来检查数字：/ ^ [a-zA-Z0-9] + $ /

然后通过将其声明为FormControl来添加对输入的引用，添加验证器并将引用传递到输入的formControl属性中。不要忘记在表单组上添加新创建的表单控件。

添加到课程：

let numericRegex = /^[a-zA-Z0-9]+$/;
let myNumeric = new FormControl('', [
  Validators.required,
  Validators.pattern(numericRegex), // <-- Here's how you pass in the custom validator using regex.
]);

模板：

<input class="form-control"
      [formControl]="myNumeric" required >

  <div *ngIf="myNumeric.errors.required">
    value is required.
  </div>
  <div *ngIf="myNumeric.errors.pattern">
    only alphanumeric
  </div>

希望这会有所帮助！

角度7输入数字验证

2 个答案: