I created a v-dialog form using Vuetify with some text-fields that are checked by some rules
For instance:
<v-dialog
persistent
max-width="1024"
>
<v-text-field
v-model="lastname"
:rules="nameRules"
:counter="10"
label="Last name"
required
></v-text-field>
I implemented a button to submit the information in the form which works well. However, the rules are only checked (and errors displayed), if the button is of type submit, like this:
<v-btn type="submit" #click="addNewMember()" class="mt-2" size="large">Add new member</v-btn>
However, now the v-dialog disappears when the type="submit" is used. This is normal behavior but I would like users to add new information right away, for instance by resetting the input fields and showing a snackbar that the previous data was entered properly.
If I remove the type="submit", adding a new member still works but now the rules are not evaluated for the input fields and errors are not shown.
Is there a way to prevent the closing of the v-dialog? If I remove the type="submit", adding a new member still works but now the rules are not evaluated for the input fields and errors are not shown.
Related
I'm trying to set up a click event for a certain button in GA4 Analytics in GTM, but the event does not fire in the preview.
The button has a specific ID. I can see the ID in the DOM, I can see that the gtm.element contains the ID in the API call, but the debug information shows that the Click ID does not match.
I've tested with my front-end developers that the event click events are propagated through the DOM. On a simple image where I've set up the click event in the same way the click event is properly registered.
Any insight in how to solve this is greatly appreciated.
From you screenshots. Looks like GTM detect the click is fired on the <span> inside the button you want.
For this kind of case. I would suggest to use click element as your trigger.
Here is the selector
button#ga_welcome_start_print_job, button#ga_welcome_start_print_job *
This means we want to track the click for the button and all the element inside it.
TLDR; wrap text in an attribute that has id property. Make a custom variable in GTM, of type 'Auto Event Variable' -> Variable Type = Element ID. Then assign to tag.
I had a similar situation. I was using React MUI's Button and I noticed that the id attribute wasn't actually being assigned to GA4's elementId. My guess is the id attribute wasn't 'bubbling' up or it was being processed somehow in MUI which conflicts with GA4. Anyways, I literally just started using analytics, so here's what I did to get it working.
I had a MUI button with the following setup
<Button
id='location-filter-tag'
className='reco-filter-button'
variant={searchState === 'cumulative' ? "contained" : "text"}
size="small"
onClick={() => {
setQueryType('cumulative');
}}
>
<h6 className="some-class">
Location
</h6>
</Button>
Checking the the push event gtm.click below, you can see the id='location-filter-tag' is concatenated into one big string. under gtm.element.
At the time, the gtm.elementId was an empty string (image is of working instance)
I tried to hook into gtm.element and trigger the tag using contains = location-filter-tag but that didn't work. So I moved the id property to the child attribute to get it to register with GA4's gtm.elementId
<h6
id='location-filter-tag'
className="text-overflow reco-filter-text"
>
Then in google tag manager, I setup a variable like so:
Then I assigned it as a trigger. This is my location trigger
hope that helps.
I am using zorro antd to implement multiple tabs feature, I would like to warn my user when they have unsaved changes, and only leave the tab if the user confirms. Seems there isn't a callback before leaving the tab, (nzSelectChange) is the call back after tab changed instead of before. So how can I implement a feature like this using nz-tabset of zorro?
NzTab has a (nzClick) EventEmitter to handler the tab title click event, but it does not emit the native mouse-event, so we cannot capture the native event. But I found the nz-tab [nzTitle] property can be a TemplateRef, so we can build our tab title and handler the click event before triggering tab-set's (nzSelectChange). For Example:
<ng-template #tabTitle1>
<div (click)="beforeActivateTab(0, $event)">Tab 1</div>
</ng-template>
And, I build an online example you can visit here:
https://stackblitz.com/edit/ng-zorro-antd-start-drc5uf
I have a form in reactstrap that has several input fields that uses FormFeedback like this:
<Input invalid={typeof data.name === "undefined" || data.name.length<1} bssize="sm" type="text" name="name" id="name" placeholder="Name" value={data.name} onChange={this.props.handleInputChange} />
<FormFeedback >A name is required</FormFeedback>
<Button color="primary" onClick={this.save} disabled={!this.state.okToSubmit}>Submit</Button>
Is it possible to have the submit button of the form disabled until all fields are validating ok?
I can´t find any way to access the "invalid" prop of a field. The closest I have come so far is to look at the classList of target in the handleInputChange-function. But that feels very hacky and not the best way.
Quite new to React so all help is really appreciated.
There are a number of ways you can accomplish this: Since you are using onChange event handler, you can set another state var.
So, for example, say you have five form elements that you want to have be required. Every time an element is validated, increase that state var by one. Then add a conditional for the button to be disabled or not by disabled={this.state.okToSubmit != 5} (this can also be done using hooks if you're using a functional component.
Another option would be to keep the button live, and do all the validation within the onSubmit handler, but I think most modern day UX is to validate on a per element basis.
Whats "best practice" for rendering components in a form based on user input?
I want a second input field added to the form when a user clicks option 2 on the dropdown button. I also want this if show cleared when a user clicks another option.
<form>
<button class='test'>my dropdown button with option 1,2,3</button>
<input type=text> input field 1</input>
<!-- if button clicked options 2, add second input field -->
<input type=text>input field 2</input>
</form>
Template.name.events({
'click .test': function() {
// something to render input field 2
}
)};
Thank you.
You can show your elements on conditional basis with helpers.On your second button click you can set a session and use it in a helper.Then in your html page use {{#if}} your element {{/if}}
And for clearing it , destroy this session.
Hope this make sense to you.If any query lmk
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.