提交表单后应用错误类并显示错误字段的相关验证消息？角度 2答案

【问题标题】：Apply error class and show related validation messages for incorrect fields after form submission? angular 2提交表单后应用错误类并显示错误字段的相关验证消息？角度 2
【发布时间】：2016-04-21 00:19:13
【问题描述】：

目前我的表单提交功能如下：

submitListing(value: string): void {
    if(this.newListingForm.valid) {
      console.log("Form Valid");
    } else {
      console.log("Form Invalid");
    }
  }

在这里我检查我的整个表单是否有效，如果不是（else 条件）我想将 .error 类应用于此表单中的所有无效字段并显示相关的错误消息。我能够在表单上关注this guide 并了解如何在用户在表单中输入数据时实现这一点，但是在提交表单后我该如何做到这一点？

这是表格中的示例部分：

<form [ngFormModel]="newListingForm" (ngSubmit)="submitListing(newListingForm.value)">

<input type="text" placeholder="New Title" [(ngModel)]="mainTitleInput" [ngFormControl]="newListingForm.find('mainTitleInput')" id="main-title_input" class="transparent">

<!-- etc.. -->

</form>

以及我的 app.ts 中的相关验证代码（使用 FormBuilder）

//New Listing Form
this.newListingForm = fb.group({
  'mainTitleInput': ['', Validators.compose([Validators.required])]
});

【问题讨论】：

标签： angular forms typescript validation

【解决方案1】：

只需在您的类中设置一个字段并将其包含在您用于显示错误指示符的条件中 (*ngIf="!newListingForm.controls['mainTitleInput'].valid && isSubmitted)。

var isSubmitted: boolean = false;

submitListing(value: string): void {
  this.isSubmitted = true;
  if(this.newListingForm.valid) {
    console.log("Form Valid");
  } else {
    console.log("Form Invalid");
  }
}

【讨论】：

似乎 && isSubmitted 条件不起作用。我尝试提交无效的表单，但没有看到我的错误 div。但是，如果我删除它，我会在 mainTitleInput 字段无效时看到它
您能否将代码（尤其是标记）添加到您想如何使用它的问题中？您使用什么策略来显示/隐藏错误/警告？添加/删除类，*ngIf，...？
好吧，为简单起见，考虑一个包含文本“Error inside it”的 div。所以<div *ngIf="!newListingForm.controls['mainTitleInput'].valid && isSubmitted>Error</div> 我想在表单提交后显示这个 div，如果 mainTitleInput 无效。以下检查工作正常，但即使表单未登顶也完成！newListingForm.controls['mainTitleInput'].valid
它对我有用。在您的最后一条评论中，您的代码示例在>Error</div> 之前缺少"。您的真实代码中是否也缺少它？
您的问题没有提供足够的信息。你可以创建一个 plunker，然后我可以尝试调试它。否则我只能猜测。

【解决方案2】：

要完成 Günter 的回答，您还可以利用 ngClass 指令添加一些类以显示错误。例如，对于 Twitter Bootstrap，它将是 has-error 类：

<form [ngFormModel]="companyForm">
  (...)
  <div class="form-group form-group-sm"
       [ngClass]="{'has-error':!companyForm.controls.name.valid}">
    <label for="for" class="col-sm-3 control-label">Name</label>

    <div class="col-sm-8">
      <input [ngFormControl]="companyForm.controls.name"
             [(ngModel)]="company.name"/>
      <span *ngIf="!companyForm.controls.name.valid"
            class="help-block text-danger">
        <span *ngIf="companyForm.controls.name?.errors?.required">
          The field is required
        </span>
      </span>
    </div>
  </div>

希望对你有帮助蒂埃里

【讨论】：

[ngClass] 似乎不适用于像 ``` [ngClass]="{'has-error': !newListingForm.controls['listingNameInput'].valid && isSubmitted} 这样的语句``` 如果我删除 && isSubmitted 而不是应用错误类，但是没有提交表单