如何在angular2中执行表单验证

Question

这里提交我返回错误，如果表单无效，我检查如form.email ==＆＃39;＆＃39;如果我的字段较少，这是可以的。如果我有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>

我的，

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');
            }
        });