Question

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

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

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

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

如何在angular2中执行验证

2 个答案: