如何通过 angular 指令将焦点设置在控件上

Question

我已经创建了一个指令来验证输入的值，如果值不在某个限制之下，我想清除该值并再次将焦点设置到该控件

    @Directive({
      selector: '[validate-onblur-search]'
    })
    export class ValidateOnBlurDirectiveSearch {
      constructor(public formControl: NgControl,
        private toastr: ToastrService,
        private element: ElementRef) {
      }
      @Input() isAgreement: boolean;
      @HostListener('focusout', ['$event'])
      onBlur($event) {
        if ($event.target.value) {
          switch (this.formControl.name) {
            case 'from_township':
              // ^\h*(?:(?:\d|[1-9]\d|1[0-5]\d|16[0-7])(?:\.\d{1,2})?|168(?:\.0{1,2})?)[NS]?$
              // var regix = new RegExp(/\b([1-9]|[1-9][0-9]|1[01][0-9]|12[0-1])(\.\d{1,2})?[N,S]?$/);
              var regix = new RegExp(/^\h*(?:(?:\d|[1-9]\d|1[0-5]\d|16[0-7])(?:\.\d{1,2})?|168(?:\.0{1,2})?)[NS]?$/);
              if (!regix.test(this.formControl.value)) {
                this.toastr.warning('Accept number and decimal.Max no is 168 followed by N or S');
              }
              break;
            case 'from_range':
              var regix = new RegExp(/^\s*(?:(?:\d|[1-9]\d|1[0-1]\d|120)|121 ?)[NS]?$/);
              if (!regix.test(this.formControl.value)) {
                this.toastr.warning('Max no is 121 followed by N or S');
                // this.formControl.setValue();
                this.formControl.control.setValue(null, { emitEvent: false });
              }
              break;
          }
        }
      }
    }

除了将焦点设置为控制之外，一切正常。任何人都可以建议我失踪的地方吗？

Answer 1

this.element.nativeElement.focus();

因此在您的示例中它可能看起来像：

if (!regix.test(this.formControl.value)) {
  this.toastr.warning('Max no is 121 followed by N or S');
  // this.formControl.setValue();
  this.formControl.control.setValue(null, { emitEvent: false });

  this.element.nativeElement.focus();
}
break;

如何通过 angular 指令将焦点设置在控件上

How to set focus on the control from angular diretive

angular-directive

angular