对于从日期选择器或输入的程序中选择的正确日期，反应式表单验证失败

Question

我在 angular 5，不确定我做的事情是否正确。基本上，我对日期字段进行了验证，该字段必须是今天或之前。否则，就是错误。如果我输入日期，验证工作 perfectly.If 正确的日期是 select 从 datepicker 编辑或者我从代码输入数据，例如 inputelement.value='2018-01-01'，控件被标记为无效，直到我更改值中的某些内容并失去焦点。这是我使用的代码：

component.ts:

            this.rForm = fb.group({
  'processedon' : [null, [Validators.required,dateIsBeforeOrOnToday]]

        });

验证者：

        export function dateIsBeforeOrOnToday(control: AbstractControl) {

    var date=control.value;

    if (dateisvalid(date)==false){
         //another method confirms the date is valid
        return { validDate: true };
    }

    //confirm it is before today or today
    date = new Date(Date.parse(date));
    let today=new Date();
    today.setHours(0,0,0,0);

    if (date <= today) {

        return null;
    } 

    return { validDate: true };

}

html:

     <div class="input-group">
    <input type="text" class="form-control" formControlName="processedon" ngbDatepicker #d="ngbDatepicker"/>
    <span class="input-group-addon" (click)="d.toggle()">
        <i class="fa fa-calendar"></i>
    </span>
</div>

这里的问题是如果我 select 使用 bootstrap 日期选择器的其他有效日期，它仍然说它无效。我只需要更改任何内容（例如 2018-01-01，删除最后一个 1 然后放回去）然后它就有效了。

Answer 1

你的验证器是错误的。一个 ng-bootstrap datepicker 的模型是 NgbDateStruct 类型的，即一个有年、月（从 1 开始）和日的对象。这样的对象不能传递给 Date.parse().

这里是 working example，显示了正确的验证器。阅读 ng-bootstrap 文档，学习使用 TypeScript 和指定类型。

export function dateIsBeforeOrOnToday(control: FormControl) {
    const dateStruct: NgbDateStruct = control.value;
    if (!dateStruct || !dateStruct.year || !dateStruct.month || !dateStruct.day) {
      return { validDate: true };
    }
    //confirm it is before today or today
    const date = new Date(dateStruct.year, dateStruct.month - 1, dateStruct.day);

    let today = new Date();
    today.setHours(0,0,0,0);

    if (date <= today) {
        return null;
    } 

    return { validDate: true };
}

对于从日期选择器或输入的程序中选择的正确日期，反应式表单验证失败

reactive form validation fails for correct date selected from datepicker or program entered

ng-bootstrap

angular