Angular 5 只对模糊进行验证？

Question

我想知道是否可以在 blur 上以反应形式进行验证。目前您可以设置 updateOn: "blur" 但输入字段的值不会在输入时更新。在我的例子中，我需要在每次击键时更新值，因为我用它进行计算并将结果显示给用户。验证应该只在模糊时发生。

谢谢。

编辑：

我使用 FormBuilder，一些内置验证器和一些自定义验证器。示例代码：

let formToMake = {
  purpose: [null, Validators.required],
  registrationDate: this.fb.group({
    day: [null, Validators.required],
    month: [null, Validators.required],
    year: [null, Validators.required]
  }),
  isTruth: [null, Validators.compose([checkIfTrue, Validators.required])]
};

如果我要使用模糊事件，我需要手动完成所有验证，我认为这不是一个好方法。

Answer 1

我相信您正在寻找 Angular 元素上的 ng-binding。例如，您可以像这样为输入字段绑定到击键和模糊：

<input type=text (blur)="validate()" (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
   // Update value of string on every keystroke
} 

validate() {
   // Validation code goes here
}

您也可以使用 ngModel，这样您就完全不必担心击键问题，因为字符串会自动为您更新。它看起来像这样：

<input [(ngModel)]="name" (blur)="validate()">

name: string;

validate() {
   // Validation code goes here
}

由于您正在考虑使用 Reactive Forms 模块及其验证，您可以这样做：

模板方法

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

ngModel 绑定会在每次击键时更改输入，因此您不必手动进行。我真的建议采用这种方法，因为这是您目前要求做的。

响应式表单方法

this.nameForm = new FormGroup ({
  firstname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  }),
  lastname: new FormControl('', {
    validators: Validators.required,
    updateOn: 'submit'
  })
});

参考文献：SO Approach Medium Article

Answer 2

updateOn 只是一个属性访问器方法。输入 HTML 标记有一个名为 blur 的事件绑定，可用于方便。

URL 到官方文档。 https://angular.io/guide/user-input#on-blur

Answer 3

我最终做了什么：

使用反应形式：

TS

这是要制作的表格。我需要在 blur 上验证 productCost 和 loanAmount，但值本身需要更新 onchange。如果您设置 updateOn: "blur" 验证发生在模糊事件之后，但值也会在模糊事件之后更新。

let formToMake = {
      productCost: new FormControl(null, {validators: Validators.required, updateOn: "blur"}),
      loanAmount: new FormControl(null, {validators: Validators.compose([Validators.required, Validators.min(2500)]), updateOn: "blur"}),
      loanLength: new FormControl(49, {validators: Validators.required, updateOn: "change"})
    };

处理输入法:

为了解决这个问题，我制作了一个事件处理程序，它将在输入事件时被调用。

TS

handleInput(e: any) {
    this.loanAmount = e;
  }

HTML

<input class="form__input" type="number" value="{{loanForm.get('loanAmount').value}}" id="loanAmount" formControlName="loanAmount" (input)="handleInput($event.target.value)">

Angular 5 只对模糊进行验证？

Angular 5 solely validation on blur?

javascript

angular

angular5

angular-validation