Question

我使用此链接创建了一个表单https://github.com/nimbly/angular-formly 这个http://nimbly.github.io/angular-formly/#!/.I我需要验证表单。但是大多数验证都已完成但是有角度。但是验证表单不是用户友好的。我需要使用 $ pristine和$ dirty 验证表单并更改默认字符串中给出的一些文本。 Plunker http://plnkr.co/edit/7IU7WNKjS6NgTus537K5?p=preview

// Code goes here

angular.module('test', ['formly']);

angular.module('test')
  .controller('TestCtrl', function ($scope) {
    $scope.formFields = [
      {
        "key": "firstName",
        "type": "text",
        "label": "First Name",
        "placeholder": "Jane",
        "required":true
    },{
        "key": "email",
        "type": "email",
        "placeholder": "janedoe@gmail.com",
        "required":true
    },
          {
        "key": "triedEmberSelect",
        "type": "select",
        "label": "Have you tried EmberJs yet?",
        "default": "no",
        "options": [
            {
                "name": "Yes, and I love it!",
                "value": "yesyes"
            },
            {
                "name": "Yes, but I'm not a fan...",
                "value": "yesno"
            },
            {
                "name": "Nope",
                "value": "no"
            }
        ]
    },
              {
        "key": "triedEmberRadio",
        "type": "radio",
        "label": "Have you tried EmberJs yet?",
        "default": "no",
        "options": [
            {
                "name": "Yes, and I love it!",
                "value": "yesyes"
            },
            {
                "name": "Yes, but I'm not a fan...",
                "value": "yesno"
            },
            {
                "name": "Nope",
                "value": "no"
            }
        ]
    }
      ];

          $scope.formOptions = {

        //Set the id of the form
        uniqueFormId: 'myFormId',

        //Hide the submit button that is added automaticaly
        //default: false
        hideSubmit: false,

        //Set the text on the default submit button
        //default: Submit
        submitCopy: 'Login'
    };

    $scope.onSubmit = function() {
        console.log('form submitted:', $scope.result);
    };
      $scope.result = {};
      $scope.okbuttonClick=function () {
        // body...
        console.log($scope.result)
      }
  });

有没有办法像那样验证？你的名字是必需的。

我们可以像这样验证这个表格 http://scotch.io/tutorials/javascript/angularjs-form-validation http://code.realcrowd.com/on-the-bleeding-edge-advanced-angularjs-form-validation/

我需要像http://angular-js.in/tag/form/

那样进行验证

Answer 1

Angular中的表单“验证”与您可能期望的完全不同。 Angular会根据您的要求进行验证，但默认情况下，它不会对验证做任何事情。在您的plunkr中，如果您检查其中一个输入字段，您会注意到编辑时CSS类名称正在更改。 ng-pristine，ng-dirty，ng-valid，ng-invalid等等。由你来修改你的CSS以便在视觉上做一些事情，Angular不会自动显示任何视觉错误。

此外，Angular不会阻止您提交无效表单。您的代码必须检查表单以查看它是否为$ invalid。您可以在提交功能（推荐）中执行此操作，如果$ invalid计算结果为true，则可以禁用提交按钮（除了提交函数之外，还建议使用）。您可以使用ng-show / ng-if / etc指令根据表单和/或字段的状态显示/隐藏验证错误。

基本上，Angular验证提供了验证单个表单元素值的机制。由您的业务逻辑必然会有所不同，由您来决定如何处理它。您的UI需求也可能会有所不同，因为某些表单在显示错误之前等待用户提交它，有些需要命中ajax端点进行验证，而其他表单则在用户导航时提供每个字段的反馈。您必须自己实现该功能，或者找到为您完成此功能的第三方模块。我没有任何经验，但希望这有助于为你填补一些空白。

如何使用$ pristine和$ dirty in angular验证表单？

1 个答案: