角度表單驗證

我在驗證中遇到了某些情況。我需要確定一個字段 - 「名字」。我一直在使用驗證邏輯是 -角度表單驗證

如果該字段爲髒然後驗證對正則表達式

ng-show="aspnetForm.FirstName.$dirty && aspnetForm.FirstName.$error.nameValidate"

如果被標記爲所需要的字段（目前保持電場需要被完全依賴業務，所以我從JSON讀取真/假值），那麼用戶可以嘗試提交表單，因爲它是

ng-show="blankSubmit && aspnetForm.FirstName.$error.required"

其中blankSubmit只是一個範圍變量我設置上提交按鈕點擊正確的。

現在第三個場景是我沒有得到也就是說如果用戶點擊名字文本框，然後不必擔心弄髒了它的邏輯，只是模糊了，然後如果異常需要，是應該顯示的驗證消息設置爲true。如果我只是將ng-show="aspnetForm.FirstName.$error.required"然後在頁面加載自己顯示錯誤消息，我不想要，因爲它給用戶一個糟糕的用戶體驗。

我只希望在將ng-required屬性設置爲true並且用戶模糊出文本框時顯示錯誤消息。

來源

2014-01-31 Achyut

一個可能的解決方案是創建一個指令，它標誌着一個字段訪問，然後您可以在NG-顯示檢查：

.directive('visited', function() { 
    return{ 
     restrict: 'A', 
     require: 'ngModel', 
      link: function(scope, element, attrs, ngModel){ 
       element.bind('blur', function(){ 
        scope.$apply(function() { 
         ngModel.visited = true; 
        }); 
      }); 
     } 
    }; 
});

查看：

ng-show='form.field.$error.required && (form.field.$dirty || form.field.visited)'

來源

2014-01-31 12:18:35

我實際上是新的角。所以，如果這是我會採取的最佳做法，但除了創建一個指令，沒有辦法做到這一點 – Achyut

不是我所知道的。您有一個包含無效字段的表單，並且只有在字段被訪問後才顯示錯誤消息。我不相信角度提供了一種機制來處理這種情況（如果真的的話，那很好！）。 –

我會建議你使用ng-messages。你的HTML應該是這樣的：

<div ng-messages="aspnetForm.FirstName.$error" role="alert"> 
    <div ng-message="required">Please enter a value for this field.</div> 
    <div ng-message="nameValidate">This field must be a valid.</div> 
    ... 
</div>

如果你想這取決於一些變數我，你會使用這個<input ... required={{shouldBeRequired}}/>建議使用需要。這應該起作用，只有在設置適當的值時才需要驗證必填字段。

來源

2016-10-04 05:48:44 GROX13

角度表單驗證

回答

相關問題