Develop Reference

Why function doesn't work with a button component but does with a button html tag in VUE js?

I made a VUE component button and tried to associate a v-on:click function, but it didn't work. Then I substituted it for an HTML button and it did work. I need to understand why.
I made this button component, which was loading ok on it's parent
<template>
<button v-on:click="action">{{ name }}</button>
</template>
<script>
export default {
name: "Appbutton",
data: function() {
return {};
},
props: {
name: String,
}
};
</script>
The code didn't fail when loaded by its parent:
<template>
<form class="login-form" action>
<label for="email">Register E-mail</label>
<input type="email" name="email" v-model="email" />
<label for="password">Register Password</label>
<input type="text" name="password" v-model="password" />
<div class="button-group">
<AppButton action="register" name="Login" />
<AppButton action="register" name="Login with Google" />
</div>
</form>
</template>
<script>
import AppButton from "#/components/AppButton";
export default {
name: "RegisterForm",
data() {
return {
email: "",
password: "",
show: true
};
},
methods: {
register: function(e) {
console.log("registered");
e.preventDefault();
}
},
components: {
AppButton
}
};
</script>
When pressed the "Login" button, it reloaded the page with the parameters email and password in the URL but the console.log was not displayed nor triggered anywhere. I tried sending the "register" function as a prop to the AppButton.vue but it had the same behaviour.
It only worked when I substituted the button component for a regular HTML button. Now it works as expected.
I just need to understand why is this behaviour, and how should I have to solve it?
Thanx in advance.

First of all you have to add action as a prop to your AppButton, then you need to bind your click event using :click="register".
I made a sandbox with an example: https://codesandbox.io/embed/vue-button-action-c5kun

Happens because of form submit is not prevented.
Put #submit.prevent on form tag
<form class="login-form" action #submit.prevent>
<label for="email">Register E-mail</label>
<input type="email" name="email" v-model="email" />
<label for="password">Register Password</label>
<input type="text" name="password" v-model="password" />
<div class="button-group">
<AppButton action="register" name="Login" />
<AppButton action="register" name="Login with Google" />
</div>
</form>

Angular form is undefined when submitting via ngSubmit

I have a form outlined in my app.component.html file as below, when I click the Send button to submit the form I get an error in my Javascript saying that the chatForm is undefined.
I've had a look at a few different tutorials and I can't seem to find why this function is not operating as I expect. What am I doing wrong?
Also when I'm submitting the form how do I get the value of the input that is present in my form? I have a name of message defined on the form, how can I use this variable?
app.component.html
<div class="container">
<h2>Message Form</h2>
<form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
<div>
<label for="message">Message</label>
<input type="text" id="message" name="message" [(ngModel)]="message" required>
</div>
<button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
Send
</button>
</form>
</div>
app.component.ts
public sendMessage(form): void {
console.log("Message sent: " + form.value);
}

You should get the data by using
form.value.message
My example look like this
<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
<div class="form-group">
<label for="UserName">Your email</label>
<input
type="text"
ngModel
class="form-control"
id="UserName"
name="UserName"
required
/>
Then in my component I can access to the form data like this
onSubmit(formValue: NgForm) {
const registerModel: AccountModel = {
UserName: formValue.value.UserName,
Password: formValue.value.Password
};

Sending form data to specific email address using react-form

I am using React Form to create a contact form in a basic React landing page and I want, when the user presses submit, the data to be sent to a specific email address (e.g. info#info.com). I am soory if this is a rookie question but I cannot seem to find the answer!
//the state
constructor(props) {
super(props);
//this.handleSubmit = this.handleSubmit.bind(this);
this.state = {};
}
//the form
<Form onSubmit={submittedValues => this.setState( { submittedValues } )}>
{ formApi => (
<form onSubmit={formApi.submitForm} id="form2">
<label htmlFor="firstName">First name</label>
<Text field="firstName" id="firstName" />
<label htmlFor="lastName">Last name</label>
<Text field="lastName" id="lastName" />
<label htmlFor="email">Email"</label>
<Text field="email" id="email" />
<label htmlFor="subject">Subject</label>
<Text field="subject" id="subject" />
<label htmlFor="message">Message</label>
<TextArea field="message" id="message" />
<button type="submit" className="mb-4 btn btn-primary">Submit</button>
</form>
)}
</Form>

You can do this by doing following steps:
First of all you need a script on backend (server side) which would send an email whatever data you pass it.
Second, you need to send an Ajax Request to that script on server side and pass all the data you need to send through Email.
If you are using PHP on server side you can use PHP's mail function or you can use any library of your choice.

Conflicting events: onKeyPress & onClick

I have a from like this:
With the following code:
<form onKeyPress={this.login.bind(this)}>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button type="button" onClick={this.login.bind(this)}>Log In</button>
</form>
While I have the login() method like below:
login(e){
if((e.type==='keypress' && e.which===13) || e.type==='click'){
//Do login operations:
this.props.store.login()//the method inside MobX store
}
}
On following scenarios, there is no errors and I can login:
I click on the login button with mouse
I press Enter while the login button is NOT focused
But the following 3rd scenario, gives me errors due to the login operations being called twice:
When I press Enter while login button IS focused (for example login button is focused by pressing tab key)
I wonder what is the best practice by which I can avoid the errors of 3rd scenario. I looked through other related SO questions but I couldn't figure out the best practice.
I forgot to mention I'm using ReactJS with MobX.

Solved the problem by moving onKeyPress attribute from <form> tag to text-type <input> tags:
<form>
<input type="text" placeholder="username" onKeyPress={this.login.bind(this)}/>
<input type="password" placeholder="password" onKeyPress={this.login.bind(this)}/>
<button type="button" onClick={this.login.bind(this)}>Log In</button>
</form>

You could also use the onSubmit event if it suits your use case better:
Example (JS Bin)
class App extends Component {
login = (e) => {
e.preventDefault();
console.log('login');
}
render() {
return (
<form onSubmit={this.login}>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button type="submit">Log In</button>
</form>
);
}
}

Login using enter key

I have login form in my app. Currrently I have a Login button to login. When this login button is clicked, I send the username and password values to the backend api which in turn generates a token and allow the user to move to next screen if authenticated. I want the same functionality when I press enter key. I have looked to many sources but I need a secure way. How can I do it. This is my form component
render(){
return (
<div className="LoginPage">
<div className="login-page">
<div className="form">
<form className="login-form">
<input id="username" type="username" placeholder="username"/>
<input id="password" type="password" placeholder="password"/>
<p className="message">Not registered? Request Username and Password</p>
</form>
<button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
</div>
</div>
</div>
);
}

Use the onKeyDown event with input fields, and in this method check the keycode of the key pressed by the user, Key code of Enter key is 13, so whenever he pressed enter, call the same method that you are calling on button click, Write it like this:
render(){
return (
<div className="LoginPage">
<div className="login-page">
<div className="form">
<form className="login-form">
<input id="username" type="username" placeholder="username" onKeyDown={this.onKeyDown.bind(this)}/>
<input id="password" type="password" placeholder="password" onKeyDown={this.onKeyDown.bind(this)}/>
<p className="message">Not registered? Request Username and Password</p>
</form>
<button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
</div>
</div>
</div>
);
}
onKeyDown(e){
if(e.keyCode == 13){
/*write the logic here*/
}
}
You need to use ref to focus the field if user left them blank.
Check jsfiddle for working example with focusing the field: https://jsfiddle.net/ygytaj6s/