Question

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

THX。

编辑：

我使用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

我最终做了什么：

使用反应形式：

<强> 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"})
    };

handleInput方法：

为了解决这个问题，我刚刚创建了一个事件处理程序，它将在输入事件中调用。

<强> 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)">

Answer 2

我相信你正在寻找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 Module及其验证，您可以执行以下操作：

模板方法

<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 3

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

官方文档的网址。 https://angular.io/guide/user-input#on-blur

Angular 5仅对模糊进行验证？

3 个答案: