角度2のテンプレート駆動型 - 検証サマリー

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

私はこの問題は、エラーがフォーム自体にはないことであると仮定しますが、上のフォーム内のコントロール。

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

：あなたはちょうどこのを反復、 は、より多くのテスト可能な駆動が、テンプレートはないとテンプレートがきれいになり：あなたはheroForm.form.controlsをループに持っていると

がEDIT各コントロールにエラーが表示されるでしょう

テンプレート：

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