javascript - 送信後にのみAngularJS検証ng-無効なクラス

Question

私のフォームには、検証を伴ういくつかの入力がありng-invalidます。ユーザーがフォームを送信した後にのみクラスを適用する必要があります。

送信時に、スコープに値を設定できます...

$scope.submitForm = function () {
    $scope.submited = true;
    // other bits
}

ng-invalid...しかし、検証自体を変更せずに条件付きで表示する方法がわかりません。

角度を付けて実行しています1.1.5

Answer 1

カスタム エラーについては、各フィールド内で $setValidity メソッドを使用することをお勧めします。

$scope.formName.fieldName.$setValidity('custom_error_name', true);

この種のワークフローでは、フィールド内に「ng-custom_error_name」などのカスタム クラスも作成されるため、css 部分もより細かく制御できるため、それに対処できます。

Answer 2

<div ng-app>
<div ng-controller="testController">
    <form name="formValidate">
    <input type="text" name="testing" required ng-model="testField" ng-class="{ invalid: submitted && formValidate.testing.$invalid }"/>
        <button ng-click="test()">Test</button>
        </form>
</div>
</div>
<script>
    var app = angular.module('', []);
function testController($scope)
{
    $scope.submitted = false;
    $scope.test= function()
    {
        $scope.submitted = true;    
        console.log($scope.formValidate.$invalid);
    }
}
</script>
<style>
    .invalid
{
    border:1px solid red;   
}
</style>