Question

我正在使用Angular版本5.0.1而我正试图在AsyncValidator上FormGroup上FormControls FormGroup点onBlur name: ['', {updateOn: 'blur'}] 1}}。

我可以使用以下内容让FormGroup使用表单控件：

AsyncValidator onBlur

但是，当我尝试将其应用于FormGroup时，它无法正常工作。

是否可以仅在updateOn: 'blur'上触发find /home/casper/scripts/ -maxdepth 1 -name 'casper_*.sh'，如果不是，只有在用户输入数据后才执行验证器的最佳方法是什么？

我目前唯一的另一种选择是给我们验证器的某种去抖包装。

只需阅读here，我就可以将/home/casper/scripts/casper_five.sh /home/casper/scripts/casper_four.sh /home/casper/scripts/casper_one.sh /home/casper/scripts/casper_three.sh /home/casper/scripts/casper_two.sh用于表单组了。

在新的FormGroup（值，{updateOn：＆＃39; blur＆＃39;}））; new FormControl（value，{updateOn：＆＃39; blur＆＃39;，asyncValidators：[myValidator]}）

Answer 1

在Angular5中，两种表单都可以指定更新模式：template-driven forms和reactive forms。

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

<强> Component.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>

Answer 2

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

this.formGroup = new FormGroup({
  name: new FormControl('', {validators: []})
}, {
  updateOn: 'blur'
});

Answer 3

您可以添加此指令

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 功能

Answer 4

如果有人想将docker run与AbstractControlOptions

合并，我会使用this code snippet非常有用

FormBuilder

如何为FormGroup触发Angular 5异步验证器onblur

4 个答案: