Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

Async form validation #6416

Closed
bigblind opened this issue Feb 23, 2014 · 5 comments
Closed

Async form validation #6416

bigblind opened this issue Feb 23, 2014 · 5 comments

Comments

@bigblind
Copy link
Contributor

Sometimes, the client needs to communicate with the server in order to know wether the value of an input field is valid. For instance, usernames and e-mail addresses often need to be unique.

To allow this, I'd like to propose the following: When a $parsers element (from now on called a $parser, returns a value, we check wether it's a promise (both $q and native js promises). If it is, we apply a new 'processing' state to the form input. Then, then, when the resolve function is called, it receives the value you'd normally expect from a $parser.

I'm currently working on an implementation for this, but I'm new to the codebase, so it may take some time.

@pkozlowski-opensource
Copy link
Member

Hmm, I'm pretty sure I saw already an issue opened for this, can't find it atm, though...

@bigblind
Copy link
Contributor Author

Maybe you're thinking about my topic in angular-dev? I posted about this a
while ago, but never got to implement it.

I searched for it, but couldn't find it.

2014-02-23 17:54 GMT+01:00 Pawel Kozlowski notifications@github.com:

Hmm, I'm pretty sure I saw already an issue opened for this, can't find it
atm, though...

Reply to this email directly or view it on GitHubhttps://github.com//issues/6416#issuecomment-35836209
.

@btford
Copy link
Contributor

btford commented Aug 28, 2014

This landed in the commits in the #8267 PR. Closing.

@btford btford closed this as completed Aug 28, 2014
@nikoudel
Copy link

$asyncValidators don't solve the problem described in this issue. They only mark the input as valid/invalid but they don't modify $viewValue (example). Maybe this issue should be re-opened?

@jsdevel
Copy link
Contributor

jsdevel commented Jan 1, 2016

Check out https://github.com/kogosoftwarellc/angular-async-form. I believe it solves the real issue quite nicely.

The real shortcoming is that the current angular API really only handles validation up until the user submits a form. Validation errors coming back after the user submitted the form have almost been entirely ignored. That's what angular-async-form aims to solve.

Here's a quick example of how it is used in a form:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <style>
    .error {color: red;}
    </style>
  </head>
  <body ng-controller="AppCtrl">
    <h1>Hello {{ user.firstName }}!</h1>

    <form af-submit="doSomething($event, cb)" novalidate>
      <div class="error" af-message>{{ message }}</div>
      <div class="control-group" af-control-group>
        <div class="error" af-control-message>{{ error }}</div>

        <input
          name="firstName"
          ng-model="user.firstName"
          af-control
          required>
        <button type="submit">Submit</button>
      </div>
    </form>

    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="angular-async-form.js"></script>
    <script src="app.js"></script>
  </body>
</html>

In your doSomething handler, you can call the cb with a form wide error message, or error messages isolated to controls (which invalidate the form for subsequent submissions). Users must blur controls with server side validation errors before the form may be submitted again.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants