Angular 2 with async form field validation -

i trying validate field synchronous , async validation. there problem occuring when field changes before async validation ends. if after changing validation returns error (the field invalid), there still async validation running (from previous value), , async validation return after that, field becomes valid again, should stay invalid.

---

plunker

i created plunker show occurrence: http://plnkr.co/edit/q0jtto

the plunker code create formgroup (using new forms) validators is:

this.formgroup = formbuilder.group({     id: [''],     name: [         '',          (c: abstractcontrol) => (c.value != null && c.value.length >= 3) ? null : {             key: 'name_minlength',              msg: 'the name must have @ least 3 characters'         }     ],     email: [         '',          (c: abstractcontrol) => {             if (c.value != null && c.value.length !== 4) {                 console.log('sync - success -> ' + c.value);                  return null; // ok             } else {                 console.log('sync - error -> ' + c.value);                  return {                     key: 'email_4char',                      msg: 'the email must not have 4 characters'                 };             }         },         (c: abstractcontrol) => new promise(             resolve => {                 console.log('async started -> ' + c.value);                  settimeout(() => {                     if (c.value !== 'aaa') {                         console.log('async ended - success -> ' + c.value);                          resolve(null); //ok                     } else {                         console.log('async ended - error -> ' + c.value);                          resolve({                             key: 'email_aaa',                              msg: 'the email must different "aaa"'                         });                     }                 }, 2000)             }         )     ] }); 

i don't know if forgot or did wrong, or if it's problem of angular 2 (after all, it's still in beta).

---

steps simulate

i made steps simulate problem simple making validation give async error if aaa typed , sync error if aaaa typed.

you can reproduce these steps in plunker (you can see logs of validations in browser console):

1. typing aa in email field (the field valid).
2. then type a , wait validation (the async validation show error).
3. then type a (becoming aaaa), , sync validation show error (until it's alright, wait).
4. delete last 2 as become aa again.
5. type 1 a , a before validation end.

the error message validation aaaa show, async validation end , message disappear.

---

logs

sync validation email must not have 4 characters (just example purposes) , error message must shown:

1) shows error (console logs when typing slowly):

sync - success -> aaa async started -> aaa async ended - error -> aaa sync - error -> aaaa 

2) shows error, hide after previous async call return success (console logs when typing faster):

sync - success -> aaa async started -> aaa sync - error -> aaaa async ended - success -> aaaa 

it's not error not showing, class stays ng-valid (should invalid, error not shown because of it).

this occurs if change async validator return valid (resolve null), because happens async return previous value changes validation result of last value typed (this shouldn't happen; validations related last value should define validity):

resolve => {     console.log('async started -> ' + c.value);      settimeout(() => {         console.log('async ended -> ' + c.value);         resolve(null); //ok     }, 2000) } 

is there way make field stay invalid if async validation previous value ends after validation error last value typed?