1
我對提交按鈕有疑問。現在我可以在表單中使用歐芹驗證，並且完美地工作。但是，當用戶點擊與角度綁定的提交按鈕時，如果表單中有無效輸入，我的應用程序無法停止執行點擊功能。所有的驗證都變得毫無用處。Angular 2 with parsley.js驗證無法阻止提交按鈕
我不想使用角度內置驗證，因爲parsely.js可以處理如此多的輸入情況。以下是我的代碼：
申請，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");
}
申請-page.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 protected]" 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>
的按鈕是在應用-page.html中文件的底部。點擊按鈕時，將調用apply-page.ts中的onSubmit（）函數。真的想知道是否有任何解決方案。謝謝。
我已經試過了，但它仍然無法正常工作好的視頻。角度仍然會執行onSubmit（）函數。 – gogopower
你能在角操場上發表一個實際的例子嗎？ –
我找到了答案。我應該得到parsleyjs的實例並檢查實例是否有效。如果實例有效，請執行提交功能。如果沒有，就什麼都不做。我稍後會發布我的代碼。 – gogopower