2017-07-12 16 views
0

角度2でjquery検証エンジンを使用するには? 2角度(NPM使用中角度2のjquery検証エンジン

<script src="http://localhost/2017/js2/jquery.validationEngine.js" type="text/javascript"></script> 
<script src="http://localhost/2017/js2/jquery.validationEngine-en.js" type="text/javascript"></script> 
<link rel="stylesheet" href="http://localhost/2017/css2/validationEngine.jquery.css"> 

そしてインストールjqueryの--save jqueryの をインストールし、::今はまだ

npm install @types/[email protected] --save-dev) 

そして、それがない私はjqueryの検証のindex.htmlファイル内のファイルを含ま作業。

form code <br>`<form id="idofurform" name="idofurform"> 
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name"> 
<!--onkeyup = "onlyNumbers(this.id,0,25)"--> 
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age"> 
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email"> 
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" --> 
<input maxlength="10" class="validate[custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control"> 
</form> 

私のTSコード

constructor(){ 
    $(document).ready(function(){ 
    $("#idofurform").validationEngine(); 
    }); 
} 

エラーを表示しています[ts]プロパティ 'validationEngine'が 'JQuery'型に存在しません。 /home/midhilaj/Desktop/angularhost3/src/app/components/home.component.ts (25,23)で

ERROR:プロパティ 'validationEngineは、' タイプ 'はJQuery' に存在しません。 のWebPACK:

+0

は、CLIを使用していますか? –

+0

はい、私はcliを使用しています –

+0

あなたは角度cli .jsonファイルのスクリプトでファイルをエクスポートする必要があると思うそれは動作します –

答えて

1

のコンパイルに失敗しました。私のために最後に見つかったソリューションそれ
ステップ1:のindex.htmlファイルに必要なファイルを追加すること

<script src="assets/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="assets/jquery.validationEngine.js" type="text/javascript"></script> 
<script src="assets/jquery.validationEngine-en.js" type="text/javascript"></script> 
<link rel="stylesheet" href="assets/validationEngine.jquery.css"> 

ステップ2:私のapp.component.htmlファイル

<form id="idofurform" name="idofurform"> 
<input id="stdname" class="validate[ required,custom[onlyLetterNumber]] text-input form-control" type="text" name="stdname" placeholder="student name"> 
<!--onkeyup = "onlyNumbers(this.id,0,25)"--> 
<input id="stdage" type="number" name="stdage" class="validate[custom[onlyNumberSp], required, custom[number],min[10],max[25]] form-control" placeholder="student age"> 
<input class="validate[ required, custom[email]] form-control" type="email" id="stdemail" name="stdemail" placeholder="student email"> 
<!-- onkeyup = "onlyNumbers(this.id,0,1000000000000)" --> 
<input maxlength="10" class="validate[ custom[onlyNumberSp],required,maxSize[10],minSize[10], custom[phone]] text-input form-control" name="stdphone" id="stdphone" type="phone" name="stdphone" class="form-control"> 

ステップ3:app.comonent.tsファイル

import { Component } from '@angular/core'; 
declare var $:any; 
@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
title = 'app works!'; 

constructor(){ 
(<any>$(document)).ready(function() { 
     (<any>$("#idofurform")).validationEngine();      
    }); 
    } 
} 
check() { 
(<any>$(document)).ready(function() { 
    // (<any>$("#idofurform")).validationEngine(); 
    (<any>jQuery("#idofurform")).validationEngine('attach', {bindMethod:"live"}); 
}); 
return $("#idofurform").validationEngine('validate'); 
} 

ref