角2功能檢查表格輸入

我是新來的Angular.js 2，我想檢查年齡的輸入值，如果值低於18它顯示危險文本我試過這個，但它沒有工作你能給我一個解決方案或更正代碼嗎？角2功能檢查表格輸入

@Component({ 
    selector: 'myForm', 
    template:` 
<div class="form-group"> 
     <label>age</label> 
     <input type="number" class="form-control" [(ngModel)]="age"> 
     <p class="text-danger" [style.display]="ageCheck(54) ? 'block' : 'none' ">You cannot register you're under 18!</p> 
</div> 
` 
}) 

export class FormComponent { 

ageCheck(age: number){ 
    if(age>=18) { 
     return true; 
    } 
    return false; 
}

來源

2016-06-24 Mohammad Reza

無需使用ageCheck功能，

這應該工作我想，

<p class="text-danger" [style.display]="age<=18 && age!=undefined ? 'block' : 'none' ">You cannot register you're under 18!</p>

https://plnkr.co/edit/aKqBBly2zlT3pijmnwEM?p=preview

<p class="text-danger" [style.display]="ageCheck(age) ? 'block' : 'none' ">You cannot register you're under 18!</p> 

ageCheck(age: number){ 

    if(age<=18 && age!=undefined) { 
     return true; 
    } 
    return false; 
}

來源

2016-06-24 18:10:39 micronyks

實際上，正如我所說我是新來角，我想練習使用功能，有沒有什麼方法可以使用該功能？ –

檢查我的鏈接和答案。有和沒有功能。 – micronyks

使用日Ëmin

 <label for="age">Age</label> 

     <input type="number" min="18" class="form-control" required 
      [(ngModel)]="model.age" name="age" #age="ngModel" > 

     <div [hidden]="age.valid || age.pristine" class="alert alert-danger"> 
      Age is required, should be 18+ 
     </div>

注：用戶角2 RC3爲#age="ngModel"工作

來源

2016-06-24 18:28:35 AngJobs

我傾向於使用NG-顯示或NG-如果在這種情況下，而不是直接與風格的播放。這看起來像（未測試）：

<div class="form-group"> 
    <label>age</label> 
    <input type="number" class="form-control" ng-model="age"> 
    <p class="text-danger" ng-show="age>18">{{age}}</P 
    <p class="text-danger" ng-show="age<=18">You cannot register you're under 18!</p> 
</div>

這將完全按照您的要求進行操作。由於這看起來更像是一個驗證，所以您可以通過在模塊中實現一條指令來創建驗證程序，使其更接近角度哲學。

myModule.directive('ageCheck', function() { 
    return { 
     require: "ngModel", 
     link: function(scope,element,attributes,ngModel) { 
      ngModel.$validators.ageCheck=function(modelValue) { 
       return scope.age>18; 
      } 
     } 
    } 
}); 

<form name="action"> 
<div class="form-group"> 
<label>age</label> 
<input type="number" name="ageField" class="form-control" ng-model="age" age-check> 
<p class="text-danger" ng-show="action.ageField.$error.ageCheck">You cannot register you're under 18!</p> 
</div>

如果您是Angular的新手，強烈建議通過他們的官方教程，這比我之前做過的其他教程要好得多。它真的幫助我瞭解噴油器/模塊/縮小。您還應該使用seed開始您的項目。

來源

2016-06-24 18:39:50

這是告訴你這個問題屬於Angular2。你已經想出了Angular1解決方案。 – micronyks

角2功能檢查表格輸入

回答

相關問題