Angular 2 mit petersilie.js Validierung kann nicht die Schaltfläche zum Senden blockieren

Question

Ich habe Fragen zum Senden Schaltfläche. Jetzt kann ich die Petersilie-Validierung in der Form verwenden und es funktioniert perfekt. Wenn der Benutzer jedoch auf die Schaltfläche "Senden" klickt, die mit "Winkel" verknüpft ist, und wenn eine ungültige Eingabe im Formular vorhanden ist, kann meine Anwendung die Klickfunktion nicht anhalten. Alle Validierungen werden dann nutzlos.

Ich möchte die eckige integrierte Validierung nicht verwenden, da parsely.js so viele Eingabesituationen verarbeiten kann. Hier finden Sie meine Codes:

apply-page.ts

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<number> = [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<Education>(); 
    this.experiences = new Array<Experience>(); 
    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"); 
    } 

apply-seite.html

<form class="parsleyjs" data-parsley-priority-enabled="false" novalidate="novalidate" (ngSubmit)="onSubmit()"> 
         <div class="page-section"> 
          <div class="page-section-part"> 
           <div class="row page-header-row"> 
            <div class="col-md-6 page-sub-title"> 
             PERSONAL INFO 
            </div> 
           </div> 
           <div class="row page-header-row "> 
            <div class="col-md-6 medium-text" align="center">Do you have a LinkedIn account?</div> 
            <div class="col-md-6" align="center"> 
             <input type="image" src="assets/images/pictures/linkedin-button.png" class="img-btn" (click)="getLinkedIn()" onClick="return false" alt="..."/> 
            </div> 
           </div> 
           <div class="row page-header-row"> 
            <div class="col-md-8 col-md-offset-3 small-text">We make it easier for you to import your professional profile.</div> 
           </div> 
          </div> 
          <div class="widget-body"> 
           <div class="row"> 
            <div class="col-md-6 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="first-name">First name</label> 
              <input [(ngModel)]="personalInfo.firstName" class="form-control" placeholder="First name" id="first-name" type="text" required ngControl="first-name"> 
             </div> 
            </div> 

            <div class="col-md-6 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="last-name">Last name</label> 
              <input [(ngModel)]="personalInfo.lastName" class="form-control" placeholder="Last name" id="last-name" type="text" required ngControl="last-name"> 
             </div> 
            </div> 

           </div> 
           <div class="row"> 
            <div class="col-md-6 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="email">Email</label> 
              <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"> 
             </div> 
            </div> 
            <div class="col-md-6 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="phone">Phone</label> 
              <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"> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div class="col-md-12 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="address">Address</label> 
              <input [(ngModel)]="personalInfo.address" class="form-control" placeholder="1200 Fulton st, NY, NY 10001" id="address" type="text" required> 
             </div> 
            </div> 
           </div> 
           <div class="row"> 
            <div class="col-md-6 col-xs-12"> 
             <div class="form-group"> 
              <label class="page-label" for="">Address</label> 
              <input [(ngModel)]="extraAddr" class="form-control" placeholder="1200 Fulton st" type="text"> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="form-actions page-section-submit"> 
          <button class="btn btn-danger btn-lg mb-xs" role="button"> 
           Submit your application 
          </button> 
         </div> 
       </form> 

Der Knopf ist an der Unterseite der apply-seite.html Datei. Wenn Sie auf die Schaltfläche klicken, wird die Funktion onSubmit() in apply-page.ts aufgerufen. Ich möchte wirklich wissen, ob es eine Lösung gibt. Vielen Dank.

Answer 1

Ich denke, es gibt einen Fehler in Petersilie, tut mir leid. Geben Sie type="submit" in Ihrem Button an und es sollte gut funktionieren.

Answer 2

Ich habe den Weg gefunden, das zu tun. In ngOnInit(), soll ich die Instanz von Petersilie erhalten von:

// initialize parsleyjs to validate the input 
this.instance = jQuery('.parsleyjs').parsley(); 

Dann wird in der onSubmit() Funktion:

onSubmit(){ 
    if(this.instance.isValid()){ 
     // TODO: submit form to server 

    }else { 
     console.log("do nothing"); 
    } 
} 

ich herausfinden soll, wie in Winkel 2 jQuery und Petersilie verwenden zuerst und dann versuche, sie auf meiner App zu implementieren. Hoffe, das wird anderen helfen. Vielen Dank.

By the way, ist hier gut Video darüber, wie jQuery verwenden in Winkel 2. https://www.youtube.com/watch?v=vrdHEBkGAow