Question

我在组件“ 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控件使用当前时间启动：[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;
}

问题是：

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

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

模板参考同步问题的angular 5验证

0 个答案: