如何在angular2中执行表单验证

在这里提交时，如果表单无效，我将返回错误，我将像form.email==''一样进行检查，如果我的字段较少，这是可以的。如果我有10个字段，会怎么样。有人可以建议帮助吗请

我的模板

  <form id="login-form" name="loginform" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value,loginform)" novalidate>
  <div class="col_full"> 
     <input type="email" [formControl]="form.controls['email']" id="login-form-username" name="login-form-username" value="" placeholder="username" class="form-control not-dark formcontrolheight" ngModel required>

  </div>
  <div *ngIf="submitted && !form.controls['email'].valid">
     <div  class="alert alert-danger">
        <strong>Email is required</strong>
    </div>
   </div> 
<div *ngIf ="form.controls['email'].touched" >
      <div *ngIf = "!form.controls['email'].valid" class = "alert alert-danger">
          <strong>Please enter a valid email</strong>
      </div></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" ngModel required>
  </div>
  <div *ngIf="submitted && !form.controls['phone'].valid" >
     <div class="alert alert-danger">
        <strong>Password is required</strong>
     </div>
  </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>

---

在此感谢Harry，我已经讲过了，但我没有看到任何对我有用的东西…………如果你有20分钟的时间，本次演讲将对你如何设计表单和验证有很大帮助：代码可能已经过时，但概念在RC5之前仍然是相关的。我建议你遵循Harry Ninh建议的指南之一（或者找到更符合你口味的东西，也许这更好？）没有按预期利用框架。formbuilder是用来管理验证规则的，而您已经完成了一半。指南将讨论在提交时使用字段上的有效/接触/脏属性来帮助提交。这里感谢Harry，我已经完成了，但我没有看到任何对我有用的内容…………如果您有20个几分钟后，这篇演讲将对您如何设计表单和验证有很大帮助：代码可能已经过时，但在RC5之前，这个概念仍然是相关的。我建议您遵循Harry Ninh建议的指南之一（或者找到更符合您口味的，也许这更好？），因为onSubmit（）未按预期利用框架。formbuilder是用来管理验证规则的，而您已经完成了一半。指南将介绍如何在提交时使用字段上的有效/接触/脏属性。

export class Login implements OnInit{
form: FormGroup;
submitted = false;
directives: [SignUp]
constructor(public location: Location,public router: Router, public http: Http, fbld: FormBuilder,public toastr: ToastsManager) {
    this.form = fbld.group({
        email: ['', emailValidator],
        phone: ['', Validators.required]
    });

}
ngOnInit() {
    var str = localStorage.getItem('social');
    var loc = JSON.parse(str);
    if(this.location.path().indexOf('/login') == -1){
        jQuery('#header.sticky-header').show();
        jQuery('#content .content-wrap').addClass('nopadding');
    }else{
        jQuery('#header.sticky-header').hide();
        jQuery('#content .content-wrap').removeClass('nopadding');
}
    }

onSubmit(form: any,formname) {
    console.log(form.email);
      this.submitted =true;
      if(form.email == '' || form.phone ==''){

            return ;
        }
     this.submitted =false;
   var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.http.post('http://localhost/a2server/index.php/profile/logIn', JSON.stringify(form), { headers: headers })
        .subscribe(
        response => {
            if (response.json().error_code == 0) {
             //   console.log(response.json().data[0].profile_id);
                if (response.json().data[0].profile_id) {
                    localStorage.setItem('social', JSON.stringify(response.json().data[0]));
                }
                this.toastr.success('Loggedin successfully');
                this.router.navigate(['/demo/profile']);
            }
            else {
                this.toastr.error('Loggedin failed');
            }
        });