如何通过单击angular2中的发送按钮来显示错误

Question

我真的尝试了很多东西，我搜索各种网站，但他们在触摸时显示验证或他们只是隐藏按钮，直到形式是有效的。我怎么能通过点击按钮如何验证，这就是我到目前为止尝试了....................

我的模板，

      <form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
       <div class="col_full"> 
        <input type="text" [formControl]="form.controls['email']" id="login-form-username" name="login-form-username" value="" placeholder="username" class="form-control not-dark formcontrolheight" required>
  </div>
  <div *ngIf="form.controls['email'].touched && form.submitted">

        <strong>Email is required</strong>

  </div>
  <div class="clear"></div>
  <div class="col_full">
     <input type="password" [formControl]="form.controls['phone']" id="login-form-password" name="login-form-password" value="" placeholder="password" class="form-control not-dark formcontrolheight" required>
  </div>
  <div *ngIf="form.controls['phone'].touched && form.submitted" >

        <strong>Password is required</strong>

  </div>
  <div class="clear"></div>
  <div class="col_full nobottommargin">
     <button class="col-xs-12 button button-mini loginbuttoncss  nomargin" id="login-form-submit" name="login-form-submit" value="login">Login</button>
  </div>
  <div class="clear"></div>
  </form>

但这不起作用，有人可以提出最佳做法，以便在mycase中将表单提交给onsubmit函数.....

Answer 1

Angular对每个值更改运行验证。你可以做的就是隐藏错误，直到你希望它们被显示出来。

<div *ngIf="form.controls['email'].touched && form.submitted">

最近添加了

form.submitted。您需要使用最新的Angular2和表单模块版本。