title: Angular 2 with parsley.js validation can't block the submit button
body: <p>I have questions about submit button. Now I can use the parsley validation in the form and it works perfectly. However, when user clicks submit button which binds with angular, and if there is an invalid input in the form, my app can't stop executing the click function. All the validations then become useless. </p>
  
  <p>I don't want to use the angular built-in validation since parsely.js can handle so many input situations. The following is my codes:</p>
  
  <p>apply-page.ts</p>
  
  <pre><code>import {RouteParams,Router,ROUTER_DIRECTIVES} from '@angular/router-deprecated';
  
  import {Component, ViewEncapsulation} from '@angular/core';
  import {Widget} from '../../core/widget/widget';
  import {DropzoneDemo} from '../../components/dropzone/dropzone';
  import {HolderJs} from '../../components/holderjs/holderjs';
  import {NKDatetime} from 'ng2-datetime/ng2-datetime';
  import {Autosize} from 'angular2-autosize/angular2-autosize';
  import {AlertComponent} from 'ng2-bootstrap/components/alert';
  
  // import models
  import {PersonalInfo} from './model/personal-info';
  import {Job} from '../model/job';
  import {JobService} from '../job-service';
  import {NgForm} from '@angular/common';
  
  declare var jQuery: any;
  
  @Component({
    directives: [
      ROUTER_DIRECTIVES, Widget, DropzoneDemo, HolderJs, NKDatetime, Autosize, AlertComponent,
      EducationForm, ExperienceForm
    ],
    selector: '[apply-page]',
    host: {
      class: 'apply-page app'
    },
    template: require('./apply-page.html'),
    encapsulation: ViewEncapsulation.None,
    styles: [require('./apply-page.scss'), require('../login-page.scss'), require('./forms-validation.scss')]
  })
  export class ApplyPage {
  
    colorOptions: Object = {color: '#f0b518'};
    sliderValueOptions: Array&lt;number&gt; = [200, 1547];
  
    personalInfo: PersonalInfo;
    extraAddr: string;
    job: Job;
  
    constructor(
      // the service to get data from mock-data
      private jobService: JobService,
      private routeParams: RouteParams,
      private router:Router
    ){}
  
    // called only one time at the loading time
    ngOnInit(): void {
      jQuery('#colorpicker').colorpicker(this.colorOptions);
      jQuery('.select2').select2();
      jQuery('.js-slider').slider();
      jQuery('#markdown').markdown();
      jQuery('.selectpicker').selectpicker();
  
      // initialize parsleyjs to validate the input
      jQuery('.parsleyjs').parsley();
  
      this.personalInfo = new PersonalInfo();
      this.educations = new Array&lt;Education&gt;();
      this.experiences = new Array&lt;Experience&gt;();
      this.skills = SKILLS;
  
      // fetch the id from url
      let id = this.routeParams.get('id');
      this.getJob(id);
    }
  
    // TODO: submit form to server
    onSubmit(){
      console.log("on submit");
    }
  </code></pre>
  
  <p>apply-page.html</p>
  
  <pre><code>&lt;form class="parsleyjs" data-parsley-priority-enabled="false" novalidate="novalidate" (ngSubmit)="onSubmit()"&gt;
                          &lt;div class="page-section"&gt;
                              &lt;div class="page-section-part"&gt;
                                  &lt;div class="row page-header-row"&gt;
                                      &lt;div class="col-md-6 page-sub-title"&gt;
                                          PERSONAL INFO
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row page-header-row "&gt;
                                      &lt;div class="col-md-6 medium-text" align="center"&gt;Do you have a LinkedIn account?&lt;/div&gt;
                                      &lt;div class="col-md-6" align="center"&gt;
                                          &lt;input type="image" src="assets/images/pictures/linkedin-button.png" class="img-btn" (click)="getLinkedIn()" onClick="return false" alt="..."/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row page-header-row"&gt;
                                      &lt;div class="col-md-8 col-md-offset-3 small-text"&gt;We make it easier for you to import your professional profile.&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="widget-body"&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-6 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for="first-name"&gt;First name&lt;/label&gt;
                                              &lt;input [(ngModel)]="personalInfo.firstName" class="form-control" placeholder="First name" id="first-name" type="text" required ngControl="first-name"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                      &lt;div class="col-md-6 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for="last-name"&gt;Last name&lt;/label&gt;
                                              &lt;input [(ngModel)]="personalInfo.lastName" class="form-control" placeholder="Last name" id="last-name" type="text" required ngControl="last-name"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-6 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for="email"&gt;Email&lt;/label&gt;
                                              &lt;input [(ngModel)]="personalInfo.email" class="form-control" placeholder="email@domain.com" id="email" type="email" 
                                              data-parsley-trigger="change"
                                              data-parsley-validation-threshold="1"
                                              required data-parsley-required-message=""
                                              ngControl="email"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-md-6 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for="phone"&gt;Phone&lt;/label&gt;
                                              &lt;input [(ngModel)]="personalInfo.phone" class="form-control" placeholder="i.e: Sales, Marketing" id="phone" data-parsley-type="number" required data-parsley-required-message="" ngControl="address"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-12 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for="address"&gt;Address&lt;/label&gt;
                                              &lt;input [(ngModel)]="personalInfo.address" class="form-control" placeholder="1200 Fulton st, NY, NY 10001" id="address" type="text" required&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row"&gt;
                                      &lt;div class="col-md-6 col-xs-12"&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label class="page-label" for=""&gt;Address&lt;/label&gt;
                                              &lt;input [(ngModel)]="extraAddr" class="form-control" placeholder="1200 Fulton st" type="text"&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-actions page-section-submit"&gt;
                              &lt;button class="btn btn-danger btn-lg mb-xs" role="button"&gt;
                                  Submit your application
                              &lt;/button&gt;
                          &lt;/div&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>The button is at the bottom of the apply-page.html file. When clicking the button is will call the onSubmit() function in apply-page.ts. Really want to know if there is any solution about it. Thank you.</p>