时间戳

首页 > 解决方案 > 带有模板参考同步问题的角度 5 验证

angular - 带有模板参考同步问题的角度 5 验证

问题描述

我在组件“reports-view.component.html”中有一个表单，输入控件很少（带有标签）。表单标题是：

<form #gform="ngForm" (ngSubmit)="submit()" autocomplete='off'>

然后在我要验证的每个 INPUT 标签上使用（例如日期控制！！）：

<div class="form-group">
  <label class="control-label" for="startDate">
    {{'Reports-view.start' | translate }}
  </label>

  <input #datestart="ngModel" type="datetime-local" class="form-control" id="startDate" name="datestart" 
    [value]="startDate" required ngModel (input)='changeStartDate($event.target.value)' />

  <div *ngIf="datestart.invalid && (datestart.dirty || datestart.touched)" class="alert alert-danger">
    error
  </div>
</div>

Datetime-Local 控件由​​ Current Time 启动：[value]="startDate"

现在，在表格的底部，我有：

<div class="form-actions col-ms-12">
  <button type="submit" class="btn btn-success text-white" [disabled]="!gform.valid">
    {{'Reports-view.report' | translate }}
  </button>
</div>
<div class="form-actions col-ms-12">
  <button type="cancel" class="btn btn-success text-white" (click)='goBack()'>
    {{'Reports-view.cancel' | translate }}
  </button>
</div>

正如所见，提交按钮根据表单验证被禁用和启用：[disabled]="!gform.valid"

SCSS 是：

input:invalid {
    border: 2px solid red;
}

input:valid {
    border: 2px solid #b1a9a9;
}

问题是：

  1. 初始化页面时，使用日期（如当前）初始化时输入 datetime-local 类型的输入边框不是红色但表单无效，因此提交按钮被禁用！！！，直到我更改日期或时间！ ！！
  2. 初始化页面时，我有一个文本类型的 EMPTY INPUT （边框为 RED ）。此输入由另一个选择框提供。在选择了一些空输入（上面）填充后，红色边框消失但表单仍然无效，因此提交按钮被禁用，直到我删除或添加一个字符到“空输入框”（现在与选定的文本）。

另一个现象是，当页面用空输入元素初始化时，边框用红色着色，但带有错误消息的 div 不显示！！！

标签： angularvalidation

解决方案

推荐阅读