如何在 angular 中使用 $pristine 和 $dirty 验证表单? [英] how to validate form using $pristine and $dirty in angular?

问题描述

我使用此链接制作了一个表格 https://github.com/nimbly/angular-formly而这个 http://nimbly.github.io/angular-formly/#!/.I 我需要验证表单.但大部分验证完成但有角度.但它验证表单不是用户友好的.我需要使用这个 $pristine 和 $dirty 来验证表单和更改默认字符串中给出的一些文本.普朗克http://plnkr.co/edit/7IU7WNKjS6NgTus537K5?p=preview

I made a form using this link https://github.com/nimbly/angular-formly and this http://nimbly.github.io/angular-formly/#!/.I I need to validate form .But most of the validation done but angular .But it validate form is not user friendly.I need to validate form using this $pristine and $dirty and change some text as given in default string. 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": "[e-mail]",
        "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)
      }
  });

有什么办法可以这样验证吗?您的姓名是必填项.

is there any way to validate like that ? You name is required.

我需要像这样验证 http://angular-js.in/tag/form/

推荐答案

Angular 中的表单验证"与您所期望的并不完全相同.Angular 确实会根据您的要求进行验证，但默认情况下，它不会对验证进行任何操作.在您的 plunkr 中，如果您检查其中一个输入字段，您会注意到 CSS 类名称在您编辑时发生了变化.ng-pristine、ng-dirty、ng-valid、ng-invalid 等等.由你来修改你的 CSS 来做一些视觉上的事情，Angular 不会自动显示任何视觉错误.

Form "validation" in Angular is not exactly the same thing as what you might expect. Angular does validate per your requirements but it does not, by default, do anything ABOUT the validation. In your plunkr, if you inspect one of the input fields, you will notice the CSS class names are changing on it as you edit. ng-pristine, ng-dirty, ng-valid, ng-invalid, etc etc. It's up to you to modify your CSS so that this does something visually, Angular will not automatically display any visual errors.

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

Also, Angular does not prevent you from submitting an invalid form. Your code must check the form to see if it is $invalid. You can do this in the submit function (recommended), you could disable the submit button if $invalid evaluates to true (also recommended but in addition to in the submit function). You can use ng-show/ng-if/etc directives to show/hide validation errors based on the state of the form and/or fields.

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

Essentially, Angular validation provides the mechanisms to validate the value of individual form elements. It is up to you to decide what to do with it since your business logic is bound to vary. Your UI needs, too, may vary as some forms wait for the user to submit it before displaying errors, some need to hit ajax endpoints to validate, and others provide feedback per-field as users navigate. You'll have to implement that functionality yourself or find a third-party module that does it for you. I don't have experience with any of those, but hopefully this helps fill in some of the blanks for you.

这篇关于如何在 angular 中使用 $pristine 和 $dirty 验证表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！