reset all fields in mobile app automatically

Question

I'm writing a Vue Native app and have attempted to use event.target.reset() to reset fields to their original values when the app loads, per @Vladimir Salguero's post which applies to VueJS in this thread. However, this causes the following error message to appear on the phone when the reset button is pressed: TypeError: event.target.reset is not a function. (In 'event.target.reset()', 'event.target.reset' is undefined)

Here is the reset method which is located in the <script> tags:

export default {
methods: {
    reset(event) { 
      // console.log(event);
      event.target.reset();
    }
  }
}

Here is how it's being called from within the <template> tags:

<nb-col>
  <nb-button rounded :onPress="reset">
    <nb-text>Reset</nb-text>
  </nb-button>
</nb-col>

[Native Base is also being used for UI components, thus the nb prefixes within the tags].

When the // console.log(event); line within the reset() method is enabled, it displays the following information in the console:

Class {
  "_dispatchInstances": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "_dispatchListeners": [Function bound touchableHandleResponderRelease],
  "_targetInst": FiberNode {
    "tag": 5,
    "key": null,
    "type": "RCTView",
  },
  "bubbles": undefined,
  "cancelable": undefined,
  "currentTarget": 435,
  "defaultPrevented": undefined,
  "dispatchConfig": Object {
    "dependencies": Array [
      "topTouchCancel",
      "topTouchEnd",
    ],
    "registrationName": "onResponderRelease",
  },
  "eventPhase": undefined,
  "isDefaultPrevented": [Function functionThatReturnsFalse],
  "isPropagationStopped": [Function functionThatReturnsFalse],
  "isTrusted": undefined,
  "nativeEvent": Object {
    "changedTouches": Array [
      [Circular],
    ],
    "identifier": 0,
    "locationX": 41,
    "locationY": 12,
    "pageX": 226,
    "pageY": 433,
    "target": 433,
    "timestamp": 6019178,
    "touches": Array [],
  },
  "target": 433,
  "timeStamp": 1584151959763,
  "touchHistory": Object {
    "indexOfSingleActiveTouch": 0,
    "mostRecentTimeStamp": 6019178,
    "numberActiveTouches": 0,
    "touchBank": Array [
      Object {
        "currentPageX": 226,
        "currentPageY": 433,
        "currentTimeStamp": 6019178,
        "previousPageX": 226,
        "previousPageY": 433,
        "previousTimeStamp": 6019176,
        "startPageX": 226,
        "startPageY": 433,
        "startTimeStamp": 6019103,
        "touchActive": false,
      },
    ],
  },
  "type": undefined,
}

Apparently, there is no reset within this event. So, how can all of the fields in the app be reset automatically WITHOUT adding code to manually reset each field?

score 0 · Answer 1 · answered Mar 14 '20 at 02:35

0

Try resetting a form, not an element:

event.currentTarget.form.reset();

answered Mar 14 '20 at 02:35

Robo Robok

21,132
17
68
126

I tried that and it gave this error **TypeError: undefined is not an object (evaluating 'event.currentTarget.form.reset')** – knot22 Mar 14 '20 at 02:39
I also tried `event.currentTarget.reset();` and it gave this error **TypeError: event.currentTarget.reset is not a function. (In 'event.currentTarget.reset()', 'event.currentTarget.reset' is undefined)** – knot22 Mar 14 '20 at 02:40
That means your element is not in a form. To reset an element automatically, you need to put it in a form and reset a form. That may be an overhead though - why don't just set a value to something? – Robo Robok Mar 14 '20 at 02:40
I was hoping to find a way to get all of the fields to reset automatically. – knot22 Mar 14 '20 at 02:41
Oh, so just wrap them in a `
` and use my code snippet :) Not sure how you're gonna use your event, you may need either `currentTarget` or `target`.
– Robo Robok Mar 14 '20 at 02:42
It's acting like `
` doesn't work in a native app. Does that seem right?
– knot22 Mar 14 '20 at 02:47

reset all fields in mobile app automatically

1 Answers1