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

Question

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": "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)
      }
  });

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

can we validate this form like that http://scotch.io/tutorials/javascript/angularjs-form-validation http://code.realcrowd.com/on-the-bleeding-edge-advanced-angularjs-form-validation/

i need to validate like that http://angular-js.in/tag/form/

Answer 1

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.

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.

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.