Question

我有一个简单的表单，里面只有一个日期控件。当我键入一个无效的日期，如2018年2月30日，控件处于无效状态，我的CSS样式开始，控件显示为红色边框。但我的问题是当用户点击保存时，this.appFormGroup.invalid返回false并执行保存操作。如何停止保存操作？（我想告知用户日期无效。）

以下代码演示了我所面临的问题。感谢。

app.component.ts文件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  appFormGroup: FormGroup;

  constructor(public formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.appFormGroup = this.formBuilder.group({
      sampleDate: ['']
    });
  }

  onButtonClick() {
    if (this.appFormGroup.invalid) {
      alert("Invalid");
    }
    else {
      alert("Valid");
    }
  }
}

app.component.html文件

<form [formGroup]="appFormGroup">
  <div >
    <div>
      <label for="sampleDate">Sample Date</label>
      <input type="date" [id]="sampleDate" formControlName="sampleDate" min="" class="form-control-dynamic">
    </div>
    <button (click)="onButtonClick()">Save</button>
  </div>
</form>

app.components.css文件

input[type="date"]:invalid {
    border-width : 2px;
    border-color: red;
}

Answer 1

问题是你的Angular表单没有在日期进行任何验证，因此它无效。

您需要在表单上添加验证器，例如

sampleDate: ['', [Validators.required, customDateValidator]

您可能需要创建自己的日期验证器，请参阅here

然后，如果您的自定义验证程序返回日期无效，则表单属性invalid将设置为true。

Answer 2

在您的表单控件中，您尚未使用任何验证。首先从HTML中删除min attr并创建自定义日期验证器并在创建控件时使用该验证器。为了避免空白时出现错误，请不要使用必需的，如果有值并且它无效，则从自定义验证器返回true。

sampleDate: ['', [DateValidator]] //don't use required


function DateValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== undefined && YOUR_CUSTOM_VALIDATION_LOGIC) {
            return { 'dateInvalid': true }
        };
        return null;
    }
}

Angular和html5日期无效输入问题

2 个答案: