表格小组验证

Question

我想在提交时显示消息，所以请纠正我如何验证提交。 这里是我的HTML

    <input type="text" class="form-control" formControlName="code" required>
 <label [hidden]="ascForm.controls.code.valid || (ascForm.controls.code.pristine && ascForm.submitted)" class="errorMsg">Cannot save. You must specify a code.</label>

如果我使用模板驱动的方法，这个验证条件工作正常， 但现在我正在使用模型驱动，所以请纠正我提交条件。

Answer 1

常用方法是 禁用 提交按钮，直到表单完全有效。

但是，如果您只想在用户实际提交表单时显示消息，请在您的FormComponent布尔属性中创建，指示用户尝试发布表单。像：

submitAttempt: boolean = false;

并在提交表单时，在您的组件中将其设置为true：

submitForm() {
    this.submitAttempt = true;
    ...
  }

然后，您可以submitAttempt == true过滤您的邮件。像：

<span *ngIf="!code.valid && submitAttempt">Required</span>

要获得深入的解释，请参阅以下帖子：Angular 2 forms validation，（在页面中搜索＆＃39; submitAttempt＆＃39;以快速找到引用的部分）

PS：请不要使用label标记来显示验证错误。它应该仅用于标记表单输入。