Angular reset form

4 posts, 0 answers
  1. William
    William avatar
    6 posts
    Member since:
    Dec 2014

    Posted 07 Mar 2015 Link to this post

    I am just starting out with Kendo so bear with me.. I have a typical angular form.  I have only one kendo component in it (an autocomplete widget). Everything works fine but when I reset the form and model bound to the form that particular field retains its value.

    Here is how it is defined

    <div class="form-group">
      <input kendo-auto-complete ng-model="formData.state" k-data-source="states" required="" k-placeholder="'State'" class="form-control">
    </div>


    Now after a successful submit I do this to reset the form:

    $scope.formData = {};
    $scope.signUpForm.$setPristine();
    $scope.signUpForm.$setUntouched();

    The one kendo UI widget in the form retains its old value.  I would have assumed it to be bound to the ng-model like everything else. 
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 10 Mar 2015 Link to this post

    Hello William,

    Thank you for your interest in Kendo UI.

    First of all I would suggest you to use k-ng-model, instead of ng-model, as it is optimized for usage with the Kendo UI widget. As for the problem that you are facing - currently the k-ng-model/ng-model of the Kendo UI widget is not connected with the $pristine and $dirty AngularJS forms states, and the behavior that you observe is expected. My suggestion is to manually reset the values of the widgets inside the form.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. William
    William avatar
    6 posts
    Member since:
    Dec 2014

    Posted 12 Mar 2015 in reply to Kiril Nikolov Link to this post

    Kiril,

    Isn't manually resetting the form object what I did when I executed the following?

    $scope.formData = {};

    I hope your not suggesting I have to do direct DOM manipulation with selectors inside an Angular controller, as that would be considered bad practice.  Maybe I am just missing what you are saying here.

    I did try to use the k-ng-model but it does not seem to play nice when you are using other widgets that are not Kendo.  Once again maybe there is something I am missing here.  Basically I do my styling with bootstrap and I am using https://github.com/johannesjo/ng-fab-form for validation and error messages.  I like how easy it is to use and how the errors are displayed.  However once I added the k-ng-model my validations stopped working.  I though maybe this attribute was just an abstraction to the standard ng-model but it does not seem to be.
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 16 Mar 2015 Link to this post

    Hello William,

    I am afraid that the issue is not a known one, nor is reproducible in our online demos, so please extract a runnable sample in a Kendo UI Dojo and we will be happy to help.

    I am looking forward your reply. Thanks in advance.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready