Question

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

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

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

这是否可以从模板驱动的表单中获得？

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

我的实际形式更复杂，但我可以使用英雄角度之旅教程作为例子：

<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>

Answer 1

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

编辑：不是模板驱动，而是更可测试并使模板干净，你只是迭代这个：

<div class="product-container">
  <div class="product-image"><img src="http://placehold.it/250x350"></div>
  <div class="product-description">American crew powder cleanser style remover shampoo 250ml</div>
  <div class="product-price">€19.95</div>
  <div class="add-to-cart">
    <button>Add to cart</button>
  </div>
</div>
<div class="product-container">
  <div class="product-image"><img src="http://placehold.it/250x350"></div>
  <div class="product-description">American crew pomade 85ml</div>
  <div class="product-price">€12.15</div>
  <div class="add-to-cart">
    <button>Add to cart</button>
  </div>
</div>

模板：

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`;
      }
    });
  }

Answer 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()>

Angular 2模板驱动表单 - 验证摘要

2 个答案: