Question

我试图通过控制器自定义表单验证..我想检查所有必填字段（两个文本字段和一个复选框）是否为空，但它没有按预期工作。

$scope.update = function() {
  angular.forEach( ['lastName', 'umail'], function (input) {
         if ( !$scope[input] ) {
         alert( 'Input: ' + input.name );
         angular.element( $(input) ).css('border', '1px solid #ff0000 !important');

         return false;
     }
  });
};

HTML：

<input type="text" name="user_LastName" value="" 
    ng-model="lastName" ng-class="txtlnmcolor" 
    placeholder="{{user_LastName}}" class="input-lastname"
    required>

<input type="text" name="pemail" value="" 
    ng-model="umail" ng-class="mailerror" 
    placeholder="{{pemail}}" class="input-mail">

<input type="checkbox" name="user.TermsConditions" value="true" class="checkbox-terms" ng-model="terms" ng-required="{{checked}}">
...
...
<label class="btn-submit" ng-click="update();"></label>

请问任何想法？谢谢！

Answer 1

您可以使用有角度的本机表单属性，例如formName.elementName。$ error或formName。$ valid以及由.ng-invalid或.ng-valid等角度添加的类。你不应该在元素名称上使用点，即user.TermsConditions，它更容易检查元素是否有任何错误，你可以使用formName.userTermsConditions。$ error而不是formName [＆＃39; user.TermsConditions＆＃39;]。$ error。

最后要触发角度原生表单验证，请使用ng-submit和button而不是label

css代码

.ng-invalid {
    'border', '1px solid #ff0000 !important'
}

html代码

<form name="formName" ng-submit="update(formName);">

<input type="text" name="userLastName" value="" 
    ng-model="lastName" ng-class="txtlnmcolor" 
    placeholder="{{user_LastName}}" class="input-lastname"
    required>

<input type="text" name="pemail"
    ng-model="umail" ng-class="mailerror" 
    placeholder="{{pemail}}" class="input-mail">

<input type="checkbox" name="userTermsConditions" value="true" class="checkbox-terms" ng-model="terms" ng-required="checked">

<button class="btn-submit" type="submit"></button>
</form>

控制器代码

$scope.submit(form) {
   if (form.$valid) {
       // YOUR CODE
   }
}

我希望这有效。（对不起我的英文）

问候。

自定义表单验证

1 个答案: