0

我在弹出窗口中使用日期选择器（ng-bootstrap），我希望此字段还允许用户手动插入日期（MM/DD/YYYY），但不是要求用户输入斜杠，而是应该自动填充斜杠。

Angular 8 和@ng-bootstrap/ng-bootstrap，我在 keyup 事件上编写了一个处理程序，试图附加斜杠并将值设置为 form，但它不允许我，我尝试删除 form-control 上的验证器，因此验证仅在用户完全输入日期后发生，而不是部分输入。

我在 keyup 事件上创建了处理程序

<div class="form-group" [ngClass]="displayFieldStyle(form,'abc')">
<div class="input-group">
    <input formControlName="abc" class="form-control" ngbDatepicker 
    #abc="ngbDatepicker" [minDate]="minDate" [maxDate]="maxDate" 
    minlength="10" maxlength="10" placeholder="MM/DD/YYYY" 
    (keyup)="onKeyEventHandler($event)" />

    <div class="input-group-append" (click)="abc.toggle()">
        <span class="input-group-text"><i class="fa fa-calendar"></i> 
        </span>
    </div>
</div>
</div>


this.memberLookupForm = this.formBuilder.group({
...
...
abc: ['', Validators.compose([Validators.required, 
             DateValidator.checkDateFormat])],
...
...
});


onKeyEventHandler(event: KeyboardEvent): void {
    if (event.which !== 191 ) {
      let currentValue= this.form.get('abc').value;
      if(!(currentValue == "" || currentValue == null)){
        let numChars = currentValue.length;
        if(numChars === 2 || numChars === 5){
          currentValue = currentValue+'/';
          this.form.get('abc').setValidators(null);
          this.form.controls['abc'].setValue(currentValue);
          this.form.get('abc').updateValueAndValidity();
        }
      }
   }
}



const value = c.value;
let match;
const datePattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (value) {
    if (typeof value === 'string') {
        match = value.match(datePattern);
        if (!match) {
            return {'invalidDateFormat': true};
        }
    }
}

但在两个输入值12重置为“”（空）后，表单值重置，但组件中的 var 具有 value 12/。

我想MM/DD/YYYY在用户输入两个值和四个值示例后自动填充日期字段 () =>的斜线，12即使其成为12/然后用户继续12/20使其成为12/20/用户继续12/20/2019。

4

1 回答 1

0

要执行 setValue 或 patchvalue，格式必须是带有日期月份和年份的 json，而不是字符串，这就是它变空的原因。

例如：

this.form.controls['abc'].setValue({
        day: 20,
        month: 4,
        year: 1969
     });

我们可以通过使用指令和主机监听器来做到这一点

@HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (this.appMaskValue && (this.appMaskValue.length === 2 || this.appMaskValue.length === 5) && event.key !== 'Backspace') {
      this.renderer.setProperty(this.elRef.nativeElement, 'value', this.appMaskValue + '/');
    }
  }
}

您可以在 https://medium.com/@victor.loh95/create-date-masking-custom-directive-for-ngbdatepicker-ff4cc73097c1中找到详细信息

于 2021-11-20T17:46:50.943 回答