7

我正在使用Angular 5.0.1 版，我试图AsyncValidator在.FormGroupFormControlsFormGroup

我可以onBlur使用以下方法来处理表单控件：

name: ['', {updateOn: 'blur'}]

但是，当我尝试将其应用于 aFormGroup时，它不起作用。

AsyncValidator onBlur是否可以仅在 a 上触发FormGroup，如果没有，仅在用户完成输入数据时执行验证器的最佳方法是什么？

目前我唯一的其他选择是为我的验证器提供某种去抖动包装器。

只是在这里阅读，看来我应该能够updateOn: 'blur'用于表单组。

new FormGroup(value, {updateOn: 'blur'})); 新的 FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

4

4 回答 4

9

在Angular5为两种类型的表单指定更新模式是可能的：template-driven forms和reactive forms.

第一个为你工作。这是反应形式的工作示例

组件.ts

 import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, Validators } from '@angular/forms';
    @Component({
      selector: 'form01',
      templateUrl: './student.component.html',
      styleUrls: ['./student.component.scss']
    })
    export class StudentComponent implements OnInit {
    formTitle:string="Student registration ";
    nameForm: FormGroup;

    constructor() {
    }

    ngOnInit() {
      this.nameForm = new FormGroup ({
        firstname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        }),
        lastname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        })
      });
    }
    }

HTML

<form [formGroup]="nameForm" novalidate>
  <div class="form-group">
    <label>What's your first name? </label>
    <input class="form-control" formControlName="firstname">
  </div>
  <div class="form-group">
    <label>What's your last name?</label>
    <input class="form-control" formControlName="lastname">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

  <h3>Hello {{nameForm.value.firstname}} {{nameForm.value.lastname}}</h3>
于 2018-01-04T09:22:06.487 回答
3

它对我有用。请注意，FormBuilder 可能还不支持此功能。

this.formGroup = new FormGroup({
  name: new FormControl('', {validators: []})
}, {
  updateOn: 'blur'
});
于 2017-11-16T13:34:39.817 回答
2

我将此代码段与以下代码结合AbstractControlOptions使用FormBuilder：

 constructor(private formBuilder: FormBuilder) { }
 
 this.signUpForm = new FormGroup(
   this.formBuilder.group({
     'email':    ['', ValidationUtils.emailValidators()],
     'fullname': ['', ValidationUtils.fullnameValidators()],
     'idCard':   ['', ValidationUtils.idCardValidators()],
     'username': {value: '', disabled: true}
   }).controls, {
     updateOn: 'blur'
   }
 );
于 2018-06-18T21:38:15.333 回答
0

你可以添加这个指令

import { Directive,Output, HostListener, EventEmitter } from '@angular/core';

@Directive({
  selector: '[onBlur]'
})
export class OnBlurDirective {
  // @Input('onBlur') onBlurFunction: Function;
  @Output('onBlur') onBlurEvent: EventEmitter<any> = new EventEmitter();
  constructor() { }
  @HostListener('focusout', ['$event.target'])
  onFocusout(target) {
    console.log("Focus out called");
    this.onBlurEvent.emit()
  }
}

并像这样在 HTML 中使用它

<input type="text" (onBlur)="myFunction()"/>

在组件中，您可以根据需要定义函数myFunction

于 2017-12-29T11:48:48.133 回答