2

I have a Data-Driven Form in angular 2. And in one of the control i have a custom validator. If i am using this.myForm.reset() while the control on which the validator has been applied having some value, the validator cracks up, and throws an error.

While if i'm not using this.myForm.reset() method anywhere, the custom validator works just great!

The custom validator uses a package installed by npm in the angular component. The validator is as follows:

phoneNumberValidator (control: FormControl): {[s: string]: boolean} {
   if (!validator.isMobilePhone((<string>control.value), 'en-IN')) {
     return {phoneNumberValidator: true};
   }
   return null;
}

And i'm using the validator as follows:

'phoneNumber': new FormControl('', [
     Validators.required,
     Validators.maxLength(14),
     this.phoneNumberValidator
])

Error message: Error message

As I've mentioned, the validator is working fine without myform.reset() The npm package I'm using is this

I've tried to use ngForm, but i guess it is for Template-Driven forms.

Mohamed Abbas
  • 2,228
  • 1
  • 11
  • 19
Himanshu Mittal
  • 584
  • 1
  • 6
  • 21

1 Answers1

2

It seems like the phoneNumberValidator plugin that you're using needs phoneNumber control should have at least empty string. So you set up that value to empty string while resetting a form.

this.myForm.reset({'phoneNumber': ''})
//OR
//this.myForm.resetForm({'phoneNumber': ''})
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • its not a plugin. And what you suggested isn't working. The problem still persists. Does the `reset()` method resets the form to the original (creation) state? As i'm originally providing the form an empty string as here `'phoneNumber': new FormControl('', [` – Himanshu Mittal Oct 07 '17 at 09:19
  • 1
    @HimanshuMittal This should work. You're doing something wrong. When you call `reset` method angular reset value to `null`. This answer corrects that behaviour – yurzui Oct 07 '17 at 09:37
  • @HimanshuMittal If you doubt then check this example https://plnkr.co/edit/nHuOG3rJfQb7JxXO1cCo?p=preview – yurzui Oct 07 '17 at 09:41
  • Can you find my mistake please @yurzui, as i've checked and scratched everything to find it. My Component lives [here](https://github.com/mittal01091997/Final-Year-Project/tree/frontend/Client/src/app/Components/user-signup) I did my commit before i saved my HTML changes, the HTML also follows the changes suggested by Pankaj – Himanshu Mittal Oct 07 '17 at 10:23
  • 1
    @HimanshuMittal You're calling reset without parameters. https://github.com/mittal01091997/Final-Year-Project/blob/frontend/Client/src/app/Components/user-signup/user-signup.component.html#L73 – yurzui Oct 07 '17 at 10:47
  • @yurzui thank you for helping with this. You're champ, Thanks again :) – Pankaj Parkar Oct 07 '17 at 10:49
  • @yurzui I did commited before saving the file, i have it in my project, but its not working. Can you testout my angular project please? – Himanshu Mittal Oct 07 '17 at 11:22
  • @HimanshuMittal I have already tested your project. Replace `(click)="loginForm.reset()"` with `(click)="loginForm.reset({'phoneNumber': ''})"` – yurzui Oct 07 '17 at 11:29
  • Can you please commit the code with problem statement? We can help you further – Pankaj Parkar Oct 08 '17 at 08:25
  • I have pushed the missing statuement you guys were suggesting me in the Markup code, please copy the component [here](https://github.com/mittal01091997/Final-Year-Project/blob/frontend/Client/src/app/Components/user-signup) and test if for your self – Himanshu Mittal Oct 08 '17 at 08:28
  • @HimanshuMittal Remove `type="reset"` here https://github.com/mittal01091997/Final-Year-Project/blob/frontend/Client/src/app/Components/user-signup/user-signup.component.html#L73 – yurzui Oct 08 '17 at 08:31
  • Button should have either reset or button. – Pankaj Parkar Oct 08 '17 at 08:38
  • If you don't mention type on button it will be by default submit. Which ultimately calls ngSumbit method – Pankaj Parkar Oct 08 '17 at 08:38
  • Then set `type="button"` instead of `type="reset"` I forgot it https://stackoverflow.com/questions/38786995/avoid-angular2-to-systematically-submit-form-on-button-click/40103456#40103456 – yurzui Oct 08 '17 at 08:40
  • 1
    The reason why with reset it is not working is that angular subscribes to reset event https://github.com/angular/angular/blob/4.4.x/packages/forms/src/directives/reactive_directives/form_group_directive.ts#L64 and therefore just calls form.reset without parameters https://github.com/angular/angular/blob/4.4.x/packages/forms/src/directives/reactive_directives/form_group_directive.ts#L142 – yurzui Oct 08 '17 at 08:44