Angular2表单如何获取特定的错误类型？

Question

如果给定字段为空,太短或太长,我试图隐藏/显示相应的错误消息.这是我表格的一部分:

<form  #applicationForm="ngForm" (ngSubmit)="saveApplication()" class="form-horizontal">
     <div class="row-fluid">
             <div [class.has-error]="name.touched && name.errors" class="form-group">
                   <label for="name" class="col-sm-2 control-label form-lbl">Name</label>
                       <div class="col-sm-10">
                           <input type="text"
                                   class="form-control" placeholder="Name" 
                                    minlength="8" maxlength="200" required 
                                   [(ngModel)]="application.Name" ngControl="name" #name="ngForm">
    <p *ngIf="name.errors.minlength" class="help-block">Name is too short, it must be at least 8 characters.</p>
    <p *ngIf="name.errors.maxlength" class="help-block">Name is too long, it must be less than 200 characters.</p>
    <p *ngIf="name.errors.required" class="help-block">Name is required.</p>
                         </div>
                </div>
       </div>...

如果我在段落标签中注释掉*ngIf,那么表单起作用,否则我得到一个js错误"TypeError:无法读取属性'minlength'的null"

这让我觉得错误集合是空的,我如何得到具体的错误？

作为参考我正在使用: Deborah Kurata - ng-conf

@peppermcknight推荐的解决方案有效.在ngIf中添加以下检查解决了问题:

 <p *ngIf="applicationForm.dirty && name.errors.minlength" class="help-block">Name is too short, it must be at least 8 characters.</p>
 <p *ngIf="applicationForm.dirty && name.errors.maxlength" class="help-block">Name is too long, it must be less than 200 characters.</p>
 <p *ngIf="applicationForm.dirty && name.errors.required" class="help-block">Name is required.</p>

谢谢!

Answer 1

使用安全导航(Elvis)操作符

<p *ngIf="applicationForm.dirty && name.errors?.minlength" class="he

如果未报告任何错误name.errors的null,因此name.errors.minlength抛出.