Clever Geek Handbook

Don't run the form. $ Invalid on first boot

Having such a form

    <div ng-controller="FormController as f_ctrl">
    <form ng-submit="f_ctrl.submit()" name="myForm">
    <input type="text" ng-model="f_ctrl.user.username"
            required
            ng-minlength="4"/>
    <input type="text" ng-model="f_ctrl.user.password"/>
    <input type="submit" value="Submit" ng-disabled="myForm.$invalid">
    </form>
</div>

and such a controller

    .controller('FormController', [function() {
    var self = this;

    self.submit = function() {
        console.log('User submitted form with ' + self.user.username)
    }
}]);

I have a problem where the first time the page is loaded, it immediately displays a red border in the username field, even before I start typing anything. I only need to highlight the invalid fields after the first submission. Can this be done with form.$invalid

?

+3


source to share


3 answers


You need to use $ netistine for this. This is true when the form controller does not change. so when you change data in the textbox it comes false.

A small example for you.



<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
    <input id="passAnime" type="password" name="password" ng-model="user.password" class="form-control input-md" placeholder="Password" tabindex="5" ng-maxlength="25" ng-minlength="6" required>

    <span ng-show="userForm.password.$dirty && userForm.password.$invalid">
        <p ng-show="userForm.password.$error.required" class="error-messages">
             Your password is required.
        </p>
        <p ng-show="userForm.password.$error.minlength" class="error-messages">
            Your password is too short. Minimum 6 chars.
        </p>
        <p ng-show="userForm.password.$error.maxlength" class="error-messages">
            Your password is too long. Maximum 25 chars. 
        </p>
    </span>
</div>
+3


source


You can turn off the default styling in the input field by adding a default red border by adding the following CSS:

input:required {
    -moz-box-shadow: none;
    box-shadow: none;
}

Then, if you want to highlight a field when submitting a form, you need to make sure that the form and form fields have the appropriate name attributes. This will allow you to check if the field is valid or not and apply the class to the text field if not valid:

<input type="text" name="username" ng-class="{ 'invalid-field' : f_ctrl.myForm.username.$invalid && !f_ctrl.myForm.username.$pristine }" required />


f_ctrl.myForm and f_ctrl.myform.username will add additional properties that you can use / check to determine if the form or fields are invalid or not, or if they have been changed at any time (e.g. f_ctrl.myform.username. $ dirty). You should be able to view these properties on your page by adding the following HTML:

<div>
    <pre>{{f_ctrl.myForm | json}}</pre>
</div>

Or you can output self.myForm to the console from your controller to view its properties

console.log(self.myForm);
+1


source


Angular has helpers that tell you if the form (or form field) is $dirty

(user typed something), or if the form $touched

(blur event was triggered on input). See this demo.

I only need to highlight the invalid fields after the first submission.

Unfortunately Angular doesn't support this. But you could implement this yourself pretty easily:

controller

function FormController() {
  var vm = this;
  vm.submitAttempted = false;
  vm.submit = function(isValid) {
    if (isValid) {
      // do stuff
    }
    else {
      vm.submitAttempted = true;
    }
  };
}

Html

<div ng-app='app'>
  <div ng-controller='FormController as vm'>
    <form name='fooForm' ng-submit='vm.submit(fooForm.$valid)' novalidate>
      <label>Username</label>
      <input 
        name='username' 
        type='text' 
        ng-model='vm.user.username'
        required
        ng-minlength='4'
        ng-class="{'invalid': vm.submitAttempted && fooForm.username.$invalid}">
      <br /><br />
      <button type='submit'>Submit</button>
    </form>
  </div>
</div>

CSS

.invalid {
  border-color: red;
}

Demo

I have a problem where the first time the page is loaded, it immediately displays a red border in the username field, even before I start typing anything.

Probably because you have the following CSS class:

.ng-invalid {
  border-color: red;
}

Angular always applies the class ng-invalid

to invalid fields and there is nothing you can do about it. Therefore, if you do not always want invalid fields to have a red border, you cannot use this class, and you must do it as suggested above.

Also check out ngMessages .

0


source






More articles:


All Articles