4

我有一个简单的表格，里面只有一个日期控件。当我输入无效日期（如 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;
}
4

2 回答 2

1

在您的表单控件中，您没有使用任何验证。在创建控件时，首先从 HTML 中删除 min attr 并创建自定义日期验证器并使用该验证器。为避免空白错误，如果值存在且无效，请不要使用 required 并从自定义验证器返回 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;
    }
}
于 2018-06-05T13:11:52.130 回答
0

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

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

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

您可能需要创建自己的日期验证器，请参见此处

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

于 2018-06-05T11:54:53.863 回答