Javascript 输入字段的日期格式化程序，该程序将给定的数字格式化为MM/DD/YYYY格式，该格式还接受角格式的NA字母

我有一个要求，用户应该在“MM/DD/YYYY”中输入日期（如果可用），否则应该能够在输入字段中输入“NA”。下面是stackblitz，我正试图实现这一功能

[格式化程序未验证正则表达式]

---

注意：用户应该能够在输入字段中输入数字，或者只能按NA顺序输入N和A。不需要日期验证，但格式化的数字应采用这种方式…./../。。。。或者NA。

您需要在正则表达式中添加OR表达式，以便考虑NA的情况

现在，正则表达式将如下所示：

^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}|NA$

在您的正则表达式中，两个备选值分别锚定：

• ^（[0-2][0-9]|（3）[0-1]）（\/）（（0）[0-9]）|（（1）[0-2]）（\/）\d{4}

  MM/DD/yyyyy

• |

  或

• NA$

  NA

看

它将包括：

• NA
• 年月日

---

您需要在正则表达式中添加一个OR表达式，以考虑NA的情况

现在，正则表达式将如下所示：

^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}|NA$

在您的正则表达式中，两个备选值分别锚定：

• ^（[0-2][0-9]|（3）[0-1]）（\/）（（0）[0-9]）|（（1）[0-2]）（\/）\d{4}

  MM/DD/yyyyy

• |

  或

• NA$

  NA

看

它将包括：

• NA
• 年月日

---

尝试使用正则表达式模式验证的角度反应形式-

app.component.ts-

import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  ...
})
export class AppComponent {
  inputForm: FormGroup;
  formSubmit: boolean = false;

  ngOnInit() {
    this.inputForm = new FormGroup({
      dateOrNA: new FormControl("", [
        Validators.required,
        Validators.pattern(/^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}|NA$/)
      ])
    });
  }

  sendDateStatus() {
    this.formSubmit = true;
    if (this.inputForm.valid) {
      console.log(this.inputForm.value.dateOrNA); // input value
    }
  }

  get dateOrNA() {
    return this.inputForm.get("dateOrNA");
  }
}

app.component.html-

<form [formGroup]="inputForm" (ngSubmit)="sendDateStatus()">
    <div class="form-group">
        <input type="text" name="dateOrNA" formControlName="dateOrNA">
        <br><br>
        <div *ngIf="formSubmit && dateOrNA.errors">
            <div class="text-danger" *ngIf="dateOrNA.errors.required">Value required!</div>
            <div class="text-danger" *ngIf="dateOrNA.errors.pattern">Enter valid date (dd/mm/yyyy) OR 'NA'.</div>
        </div>
        <br>
    </div>
        <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

---

尝试使用正则表达式模式验证的角度反应形式-

app.component.ts-

import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  ...
})
export class AppComponent {
  inputForm: FormGroup;
  formSubmit: boolean = false;

  ngOnInit() {
    this.inputForm = new FormGroup({
      dateOrNA: new FormControl("", [
        Validators.required,
        Validators.pattern(/^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}|NA$/)
      ])
    });
  }

  sendDateStatus() {
    this.formSubmit = true;
    if (this.inputForm.valid) {
      console.log(this.inputForm.value.dateOrNA); // input value
    }
  }

  get dateOrNA() {
    return this.inputForm.get("dateOrNA");
  }
}

app.component.html-

<form [formGroup]="inputForm" (ngSubmit)="sendDateStatus()">
    <div class="form-group">
        <input type="text" name="dateOrNA" formControlName="dateOrNA">
        <br><br>
        <div *ngIf="formSubmit && dateOrNA.errors">
            <div class="text-danger" *ngIf="dateOrNA.errors.required">Value required!</div>
            <div class="text-danger" *ngIf="dateOrNA.errors.pattern">Enter valid date (dd/mm/yyyy) OR 'NA'.</div>
        </div>
        <br>
    </div>
        <button class="btn btn-primary status-button" type="submit">Submit</button>
</form>

---

感谢大家的宝贵意见，我提出了一个完美的解决方案，创建了Angular自定义指令，并基于正则表达式使用替换函数和匹配函数格式化用户输入，以处理不同的情况。下面是我在中的代码和工作示例

处理的案例：[日期格式化程序适用于'MM/DD/YYYY'或'NA']

• 用户可以键入日期，该日期将在../../..中自动格式化
• 如果日期不可用，用户可以在字段中键入NA
• 仅允许使用N和A字符，也仅允许使用NA序列
• 除了/，字段中不允许使用所有特殊字符
• 不允许以/开头的字符串
• 通过验证给定的 字符串（如果有效），允许在字段中粘贴或放置NA
• 通过免除对backspace按键的所有验证来处理backspace按键 从现场顺利清除煤焦
• 格式化过程中不进行日期验证，而可以在提交和 向用户显示验证错误

日期格式化程序.directive.ts

    import { Directive, ElementRef, HostListener } from "@angular/core";
    import { NgControl } from "@angular/forms";
    
    @Directive({
      selector: "[dateFormater]"
    })
    export class DateFormatterDirective {
      private flag: boolean = false;
      constructor(public ngControl: NgControl, private element: ElementRef) {}
    
      @HostListener("paste", ["$event"]) handlePaste(e: any) {
        let clipboardData, pastedData;
        e.stopPropagation();
        e.preventDefault();
        let temp: any = window;
        clipboardData = e.clipboardData || temp.clipboardData;
        pastedData = clipboardData.getData("Text");
        if (pastedData.match(/^(\d{2}\/\d{2}\/\d{4})|NA$/gi)) {
          // Pasting data if the string tried to paste is valid
          this.element.nativeElement.value = pastedData;
        } else {
          // Pasting NA if the string tried to paste is invalid
          return "NA";
        }
      }
    
      @HostListener("document:keydown", ["$event"]) onKeydownHandler(
        event: KeyboardEvent
      ) {
        if (event.key === "Backspace") {
          this.flag = true;
        } else {
          this.flag = false;
        }
      }
    
      @HostListener("ngModelChange", ["$event"]) onModelChange(event) {
        if (!this.flag) {
          let newVal = this.transform(event);
          this.ngControl.valueAccessor.writeValue(newVal);
        }
      }
    
      transform(value) {
        let text: string = value;
        if (text.match(/^\d/gi) != null) {
          // Removing all alphabets if string starting with zero
          text = text.replace(/[a-z]/gi, "");
        }
        if (text.match(/^NN/gi) != null) {
          // To handle no two NN should be in a row and preserve NA case
          return "N";
        }
        if (text.match(/(NA)/gi) != null) {
          // To handle only one NA should be allowed
          return "NA";
        }
        if (text.match(/^N/gi) != null) {
          return text.replace(/^N\d$/gi, "N").replace(/(?!n|a)[a-z]/gi, "");
        }
    
        return text
          .replace(/^(\d{2})$/g, "$1/") // To put a '/' after MM/
          .replace(/^(\d{2}\/\d{2})$/g, "$1/") // To put a '/' after MM/DD/
          .replace(/(?!n|a)[a-z]/gi, "") // To allow only N and A in a-z
          .replace(/^a/gi, "") // Not allowing string starting with A
          .replace(/(?!\/)[^a-z0-9]/gi, "") // Not allowing all special chars except '/'
          .replace(/NN$/gi, "N") // Not allowing two N in a row
          .replace(/^AA$/gi, "A") // Not allowing two A in a row
          .replace(/^\//gi, ""); // Not allowing the string to start wit '/'
      }
    }

app.component.html

---

感谢大家的宝贵意见，我想出了一个完美的解决方案，创建了Angular自定义指令，并基于正则表达式使用替换函数和匹配函数格式化用户输入，以处理不同的情况。下面是我在中的代码和工作示例

处理的案例：[日期格式化程序适用于'MM/DD/YYYY'或'NA']

• 用户可以键入日期，该日期将在../../..中自动格式化
• 如果日期不可用，用户可以在字段中键入NA
• 仅允许使用N和A字符，也仅允许使用NA序列
• 除了/，字段中不允许使用所有特殊字符
• 不允许以/开头的字符串
• 通过验证给定的 字符串（如果有效），允许在字段中粘贴或放置NA
• 通过免除对backspace按键的所有验证来处理backspace按键 从现场顺利清除煤焦
• 格式化过程中不进行日期验证，而可以在提交和 向用户显示验证错误

日期格式化程序.directive.ts

    import { Directive, ElementRef, HostListener } from "@angular/core";
    import { NgControl } from "@angular/forms";
    
    @Directive({
      selector: "[dateFormater]"
    })
    export class DateFormatterDirective {
      private flag: boolean = false;
      constructor(public ngControl: NgControl, private element: ElementRef) {}
    
      @HostListener("paste", ["$event"]) handlePaste(e: any) {
        let clipboardData, pastedData;
        e.stopPropagation();
        e.preventDefault();
        let temp: any = window;
        clipboardData = e.clipboardData || temp.clipboardData;
        pastedData = clipboardData.getData("Text");
        if (pastedData.match(/^(\d{2}\/\d{2}\/\d{4})|NA$/gi)) {
          // Pasting data if the string tried to paste is valid
          this.element.nativeElement.value = pastedData;
        } else {
          // Pasting NA if the string tried to paste is invalid
          return "NA";
        }
      }
    
      @HostListener("document:keydown", ["$event"]) onKeydownHandler(
        event: KeyboardEvent
      ) {
        if (event.key === "Backspace") {
          this.flag = true;
        } else {
          this.flag = false;
        }
      }
    
      @HostListener("ngModelChange", ["$event"]) onModelChange(event) {
        if (!this.flag) {
          let newVal = this.transform(event);
          this.ngControl.valueAccessor.writeValue(newVal);
        }
      }
    
      transform(value) {
        let text: string = value;
        if (text.match(/^\d/gi) != null) {
          // Removing all alphabets if string starting with zero
          text = text.replace(/[a-z]/gi, "");
        }
        if (text.match(/^NN/gi) != null) {
          // To handle no two NN should be in a row and preserve NA case
          return "N";
        }
        if (text.match(/(NA)/gi) != null) {
          // To handle only one NA should be allowed
          return "NA";
        }
        if (text.match(/^N/gi) != null) {
          return text.replace(/^N\d$/gi, "N").replace(/(?!n|a)[a-z]/gi, "");
        }
    
        return text
          .replace(/^(\d{2})$/g, "$1/") // To put a '/' after MM/
          .replace(/^(\d{2}\/\d{2})$/g, "$1/") // To put a '/' after MM/DD/
          .replace(/(?!n|a)[a-z]/gi, "") // To allow only N and A in a-z
          .replace(/^a/gi, "") // Not allowing string starting with A
          .replace(/(?!\/)[^a-z0-9]/gi, "") // Not allowing all special chars except '/'
          .replace(/NN$/gi, "N") // Not allowing two N in a row
          .replace(/^AA$/gi, "A") // Not allowing two A in a row
          .replace(/^\//gi, ""); // Not allowing the string to start wit '/'
      }
    }

app.component.html

也许您可以为NA案例添加一个复选框。当它被选中时，你会禁用输入字段。是的，你是对的@LeandroMatilla，但我正试图在最坏的情况下实现这一点，也许你的解决方案是唯一的选择。谢谢是的，你必须为你的日期正则表达式找到一个OR表达式。是的，但是我仍然没有完成第一部分，比如…/。。。。带正则表达式的格式化程序如果我完成了，那么我可以继续寻找NA的解决方案。-谢谢你考虑使用这个软件包。太棒了。也许你可以为NA案例添加一个复选框。当它被选中时，你会禁用输入字段。是的，你是对的@LeandroMatilla，但我正试图在最坏的情况下实现这一点，也许你的解决方案是唯一的选择。谢谢是的，你必须为你的日期正则表达式找到一个OR表达式。是的，但是我仍然没有完成第一部分，比如…/。。。。带正则表达式的格式化程序如果我完成了，那么我可以继续寻找NA的解决方案。-谢谢你考虑使用这个软件包。这太棒了。@Leandro Matilla这太棒了。你提供的正则表达式绝对是我想要的，但是需要一些帮助来使用带有替换功能的正则表达式，并自动格式化输入字段中的用户数据，如我的stackbliz示例所示。-非常感谢您宝贵的输入。这太棒了@Leandro Matilla您提供的正则表达式绝对是我想要的，但在使用带有替换功能的正则表达式以及输入字段中的自动格式化用户数据方面需要一些帮助，如stackbliz示例所示。-非常感谢您的宝贵意见。我需要的是格式化程序，而不是验证解决方案。验证不是我问题的主要内容，但在提交时需要验证。请查看我的最终解决方案，这是作为这个问题的答案张贴。感谢您的宝贵意见。我需要的是格式化程序，而不是验证解决方案。验证不是我问题的主要内容，而是