如何在 angular2 中执行验证答案

【问题标题】：How to perform validations in angular2如何在 angular2 中执行验证
【发布时间】：2016-08-09 11:06:34
【问题描述】：

我正在尝试以这样一种方式对我的文件进行验证，即当我单击提交按钮时，它必须向空的字段显示错误。任何人都可以帮助我............ .

<div *ngFor="let detail of details" class="nopadding col-sm-12">

    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
        <div class="form-process"></div>
        <div class="col_half">
            <label for="template-contactform-name">First Name <small>*</small></label>
            <div class="input-group divcenter">
                <span class="input-group-addon  noradius"><i class="icon-user iconcolorcss"></i></span>
                <input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
            </div>
        </div>


        <div class="clear"></div>
        <div class="col_full">
            <button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
        </div>
        <div class="clear"></div>
</div>

【问题讨论】：

标签： html validation angular

【解决方案1】：

试试这个进行简单的验证....

     <input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
        <span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>

       <button (click)="clicked =  true"></button>

【讨论】：

检查我已更新问题是默认情况下修剪功能为空检查，因此它给出了未定义的错误
点击提交按钮前显示错误（默认）
是的，因为您必须在按钮上为 Click Event 编写一个函数并在 .ts 文件中处理它
我们不能从 html 做到这一点？
检查更新的只能通过 Html 处理，但这不是最佳做法

【解决方案2】：

我不正确或不正确，但这对我来说很好。参考这段代码：

<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <label for="dis_title">Topic<span>*</span></label>
            <input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
            <label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
        </div>
    </div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>

【讨论】：