带parsley.js验证的Angular 2不能阻止提交按钮
带parsley.js验证的Angular 2不能阻止提交按钮
提问于 2016-07-19 06:31:28
我有关于提交按钮的问题。现在，我可以在表单中使用香菜验证，它可以完美地工作。但是，当用户单击与angular绑定的提交按钮时，如果表单中有无效输入，我的应用程序无法停止执行单击功能。然后所有的验证都变得无用了。
我不想使用angular内置验证，因为parsely.js可以处理如此多的输入情况。以下是我的代码：
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-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@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>该按钮位于apply-page.html文件的底部。单击该按钮时，将调用apply-page.ts中的onSubmit()函数。我真的很想知道有没有什么解决方案。谢谢。
回答 2
Stack Overflow用户
发布于 2016-07-20 06:03:17
我已经找到了这样做的方法。在ngOnInit()中，我应该通过以下方式获取香菜的实例：
// initialize parsleyjs to validate the input
this.instance = jQuery('.parsleyjs').parsley();然后，在onSubmit()函数中：
onSubmit(){
if(this.instance.isValid()){
// TODO: submit form to server
}else {
console.log("do nothing");
}
}我应该首先弄清楚如何在angular 2中使用jQuery和parsley，然后尝试在我的应用程序上实现它们。希望这能对其他人有所帮助。谢谢。
顺便说一下，这里有一个关于如何在angular 2中使用jQuery的很好的视频。https://www.youtube.com/watch?v=vrdHEBkGAow
Stack Overflow用户
发布于 2016-07-19 15:17:16
我想欧芹菜里有虫子，抱歉。在您的按钮中指定type="submit"，它应该可以正常工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38446956
复制相关文章
相似问题
腾讯云开发者
