Angular 2 模板驱动表单 - 验证总结答案

【问题标题】：Angular 2 template driven form - validation summaryAngular 2 模板驱动表单 - 验证总结
【发布时间】：2017-05-16 13:26:34
【问题描述】：

我正在尝试以角度为模板驱动的表单提供验证摘要。当表单无效时，我想列出验证错误，以便用户知道要修复哪些输入。

到目前为止，我添加了这段代码来尝试显示验证错误

<pre>{{heroForm.form.errors | json}}</pre>
<ul>
  <li *ngFor="let error of heroForm.form.errors">
    {{error}}
  </li>
</ul>

这可能来自模板驱动的表单吗？

heroForm.form.errors 保持为空，即使表单上存在验证错误。

我的实际表格比较复杂，但是可以以英雄之旅的角度教程为例：

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>
  <div class="form-group">
    <label for="alterEgo">Alter Ego</label>
    <input type="text" class="form-control" id="alterEgo"
           [(ngModel)]="model.alterEgo" name="alterEgo">
  </div>
  <div class="form-group">
    <label for="power">Hero Power</label>
    <select class="form-control" id="power"
            required
            [(ngModel)]="model.power" name="power"
            #power="ngModel">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
    <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
      Power is required
    </div>
  </div>
  <pre>{{heroForm.form.errors | json}}</pre>
  <ul>
    <li *ngFor="let error of heroForm.form.errors">
      {{error}}
    </li>
  </ul>
  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
</form>

【问题讨论】：

标签： angular validation

【解决方案1】：

我认为问题在于错误不在表单本身上，而是在表单内的控件上。您必须遍历 heroForm.form.controls 并在每个控件上显示错误

编辑：不是模板驱动的，但更可测试并使模板干净，您只需对其进行迭代：

get formErrors() {
    return Object.keys(this.form.controls).map(key => {
      const errors = this.form.controls[key].errors;
      if (errors === null) { return null; }
      if (errors.required) {
        return `${key} is required`;
      } else {
        return `${key} has an unknown error`;
      }
    });
  }

模板：

<div *ngFor="let error of formErrors">
  {{error}}
</div>

【讨论】：

这可以在模板驱动的表单中实现吗？控件的类型为 {[key: string]: AbstractControl} 并且 *ngFor="let control of heroForm.form.controls" 仅适用于数组等可迭代对象。
@ChaoticNadirs 查看我为建议的方法编辑的回复

【解决方案2】：

如果您的页面在网格上具有应用了验证的控件，请尝试以下代码 -

getFormErrors(): void {
    let keys: Array<string> = Object.keys(this.myForm.controls);

    this.formErrors.splice(0, this.formErrors.length);

    keys.forEach((k: any) => {
      if (this.myForm.controls[k].errors) {

        if (this.myForm.controls[k].errors.required) {
          this.formErrors.push(`${k} is required`);
        }

        if (this.myForm.controls[k].errors.pattern) {
          this.formErrors.push(`${k} has an invalid value`);
        }

      }
    });
  }

并在保存或提交等任何事件上调用此方法

在模板中 -

<div class="row" *ngIf="myForm.submitted">
    <div class="text">Validation errors summary</div>
    <div class="alert alert-danger" style="font-size: 12px;" >

      <ul>
        <li *ngFor="let error of formErrors">
         <span *ngIf="error!=''">{{error}}</span>
        </li>
      </ul>
    </div>
  </div>

注意myForm定义如下

<form #myForm="ngForm" (ngSubmit)="Save()>

【讨论】：