My ListItem component was passed data from another component using:
renderData() {
return (
<ListItem
key={data.id}
data={data} />
)
Now in my ListItem component I have access to the data using this.props.data. I want to pass the id, this.props.data.id to reduxForm or my handleFormSubmit function.
I tried adding a hidden input field to pass the id which didn't work?
handleFormSubmit({ id, date }) {
this.props.post( { id, date })
}
And in my render method.....
render() {
const { handleSubmit, fields: { id, date }} = this.props;
return(
<div>
<form className="form-inline" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<input {...id} type="hidden" name="id" value={this.props.data.id} />
<select className="form-control" {...date} >
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>
</form>
</div>
)
}
export default reduxForm({
form: 'day',
fields: ['id', 'date']
})
There must be another way to add the data into my handleFormSubmit method that I'm not seeing?
Figured it out..simply had to send the id in my handleFormSubmit helper function and remove id from the form.
handleFormSubmit({ date }) {
const id = this.props.data.id;
this.props.post( { id, date })
}
Related
The dating application is built with MeteorJS and the page refreshes whenever I attempt to submit this form to register a user. Also, Meteor.user().services.twitter.profile_image_url doesn't seem to get Twitter image. Please help
imports/ui/components/partials/register-user.html
<template name="registerUser">
<div class="user-card">
<form id="user-form">
<div class="row">
<label for="gender">gender</label>
<select id="gender">
<option value="cis man">cis man</option>
<option value="cis woman">cis woman</option>
<option value="non binary" selected>non binary</option>
<option value="trans man">trans man</option>
<option value="trans woman">trans woman</option>
</select>
</div>
<div class="row">
<label for="prefer">seeking</label>
<select id="prefer">
<option value="cis men">cis men</option>
<option value="cis women">cis women</option>
<option value="everyone" selected>everyone</option>
<option value="non binary">non binary</option>
<option value="trans women">trans women</option>
<option value="trans men">trans men</option>
</select>
</div>
<div class="row">
<button class="button-primary register-user" type="submit" form="user-form">register</button>
</div>
</form>
</div>
</template>
imports/ui/components/partials/register-user.js
import { Meteor } from 'meteor/meteor';
import { Session } from 'meteor/session';
import './register-user.html';
Template.registerUser.onCreated(function () {
this.register_name = Meteor.user().profile.name;
this.register_img = Meteor.user().services.twitter.profile_image_url;
});
Template.registerUser.events({
'submit .register-user' (event) {
event.preventDefault();
var gender = event.target.gender.value;
var prefer = event.target.prefer.value;
if (confirm("by continuing you verify you are a minimum of 21 years old")) {
Meteor.call('register.user', this.register_name, "", gender, prefer, (error) => {
if (error) {
Flash.danger(error.error, 3000);
} else {
Session.set({'complete': true});
}
});
}
},
});
imports/api/methods.js
...
'register.user': function(name, img, gender, prefer) {
RegisteredUsers.insert({ _id: this.userId, complete: true, role: false });
Profiles.insert({
_id: this.userId, name: name, img: img, gender: gender, prefer: prefer, address: "", right: [], matches: [],
});
// redisCollection.hset(this.userId, { "name": name, "img": img, "gender": gender });
},
...
Your example show an error on event mapping:
'submit .register-user' (event) {
You used a class mapping of the button, but the submit event is from the form. Then change it to:
'submit #user-form' (event) {
I think that the issue is because you are mapping the submit event to the button which has the class register-user. Try changing your code to refer to the form from which the submit event comes. You can use its id (user-form) for doing that.
It'd be something like this:
'submit #user-form'(event) {
event.preventDefault();
...
}
I'm developing a doctor's appointment laravel project. the condition is if a user fixes an appointment they can't able to fix the appointment for the same doctor at the same date and time. I tried with firstOrCreate method but doesn't match my condition. here are my conditions
1.if doctors_id AND date AND time already exist then shouldn't insert the data
2.if doctors_id OR date OR time, any three of this already exist then can insert the data
3.if all fields already not exist then insert data
here are the code snippets
In view
<div class="card-body">
<form action="appointment" method="post">
{{ #csrf_field() }}
<select name="doctors" id="" class="form-control">
#foreach ($docList as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
#endforeach
</select><br><br>
<input type="date" name="date" id="" class="form-control">
<br><br>
<select name="time" class="form-control">
<option value="9-10AM">9-10AM</option>
<option value="10-11AM">10-11AM</option>
<option value="1-2PM">1-2PM</option>
<option value="2-3PM">2-3PM</option>
<option value="3-4PM">3-4PM</option>
</select>
<button type="submit" class="btn btn-primary">Fix Appointment</button>
</form>
</div>
In controller
public function store(Request $request)
{
$uId = Auth::id();
$fixAppointment = Appointment::firstOrNew(['doctors_id'=>$request->doctors,'date'=>request('date')],['time'=>request('time')]);
$fixAppointment->users_id = $uId;
$fixAppointment->save();
}
Here I sorted out the issue by using where condition
In controller
$appointment = Appointment::where('date', '=', request('date'))->where('time','=',request('time'))->where('doctors_id','=',request('doctors'))->first();
if ($appointment === null)
{
$fixAppointment = New Appointment;
$fixAppointment->doctors_id = $request->doctors;
$fixAppointment->users_id = $uId;
$fixAppointment->date = $request->date;
$fixAppointment->time=$request->time;
$fixAppointment->save();
}
here is the link which I referred to find this solution.
I have to enable required validation for the input field based on the onChange event of select field. I'm using vuelidate package for form validation in my project. Kindly provide solution to accomplish it.
My Template Code Below:
<template>
<section class="page_blk">
<form #submit="submitForm($event)" class="cryp_form">
<div class="input_ctrl_wrp">
<label for="username">Template</label>
<div class="input_select">
<select #change="getTemplate" v-model="$v.adForm.tnc.$model" name="" id="">
<option value="">Select</option>
<option value="New">New</option>
<option :value="term.idTnCTemplate"
v-for="term in termsList"
:key="term.idTnCTemplate">{{term.title}}</option>
</select>
<i class="fal fa-angle-down"></i>
</div>
</div>
<div class="input_ctrl_wrp">
<label for="username">Title</label>
<div class="input_text">
<input v-model="$v.adForm.title.$model" placeholder="" type="text">
</div>
</div>
<div class="input_ctrl_wrp">
<label for="username">Terms Of Trade</label>
<div class="input_textarea">
<textarea v-model="$v.adForm.content.$model" name="" rows="10"></textarea>
</div>
</div>
</form>
</section>
</template>
My Script Below:
<script>
import { required,requiredIf, decimal, numeric } from "vuelidate/lib/validators";
export default {
data() {
return {
adForm: {
tnc: '',
title: '',
content: '',
}
}
},
validations: {
adForm: {
tnc: {
required
},
title: {
required
},
content: {
required: requiredIf( (abc) => {
console.log('abc',abc)
return true;
})
},
schedule: {
required
}
}
},
methods: {
submitForm(e) {
},
getTemplate(e) {
}
},
mounted() {
}
}
</script>
I want to toggle the validation to required for the title and content field, if the user select new and other option from dropdown. Please provide solution to accomplish it. Thanks in advance.
I'm working on a form in React. I have nested state in MatchForm component and "bind" values from state with different inputs. I would like to have on onChange function which manages all cinput changes and pass it to state. Current onChange function works when I have only lineup inputs. But when I added other inputs I have no idea how to handle with it. How should I name inputs and how onChange function should look like to work with all inputs (without many ifs)?
Thank you in advance
class MatchForm extends React.Component {
constructor(props) {
super(props);
this.state = {
lineup: {
setter: '',
receiver1: '',
receiver2: '',
attacker: '',
blocker1: '',
blocker2: '',
libero: ''
},
distribution: {
receiver1: 20,
receiver2: 20,
attacker: 20,
blocker1: 20,
blocker2: 20
},
risk: 'normal',
default: false
};
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({lineup: { ...this.state.lineup, [e.target.name]:e.target.value } })
}
render() {
return (
<div>
{
Object.keys(this.state.lineup).map((el,i) =>
<select
key={i}
name={el}
onChange={this.onChange}
value={this.state.lineup[el]}
>
<option value="" disabled>{el}</option>
<option value="Marian Noga">Marian Noga</option>
<option value="Janek Kowalski">Janek Kowalski</option>
</select>
)
}
{
Object.keys(this.state.distribution).map((el,i) =>
<Field
key={i}
field={el}
label={el}
type='number'
value={this.state.distribution[el]}
onChange={this.onChange} />
)
}
<select
name="risk"
onChange={this.onChange}
value={this.state.risk}
>
<option value="" disabled>risk</option>
<option value="safe">safe</option>
<option value="normal">normal</option>
<option value="risk">risk</option>
</select>
<label><input name="default" type="checkbox" value={this.state.default} onChange={this.onChange} /> Set as default lineup</label>
</div>
)
}
}
export default MatchForm
You can bind the onChange function with different values for each of your fields:
onChange={this.onChange.bind(this, 'lineup', el)}
Then if you write your onChange like this:
onChange(field, name, e) {
this.setState({[field]: { ...this.state[field], [name]:e.target.value } });
}
You should be able now to repeat that for each of your fields.
If it is just a controlled input, and no other UI logic, I do something as simple as this:
<input type="text"
name="email"
value={this.state.email}
onChange={e => this.setState({ email: e.target.value })}
/>
You could also try _.set for more complex use cases. Good thing is, the set function alone can be downloaded as an npm package
<input type="text" name="lineup.receiver1" onChange={handleChange} value={this.state.lineup.receiver1} />
import update from "lodash.set";
const handleChange = (ev) => { update(this.state, ev.target.name, ev.target.value ) }
_.set has more complex options for updating a nested object and can be used in our case with HTML name property of a field.
I have a form with different selects like :
<select [(ngModel)]="selected.isConnected" (ngModelChange)="formChanged()" name="etat" id="etat" class="form-control">
<option value="0">Not connected</option>
<option value="1">Connected</option>
</select>
My backend expect to receive an int in the "isConnected" attribute. Unfortunately as soon as I change the value of the select the attribute is cast to a string :
{
isConnected : "0", // 0 expected
}
For standard <input> I could use type="number" but for a <select> I'm clueless.
Is there a way to force angular 2 to cast the data to int ?
Use [ngValue] instead of "value":
<select [(ngModel)]="selected.isConnected" id="etat">
<option [ngValue]="0">Not connected</option>
<option [ngValue]="1">Connected</option>
</select>
If you want cast it within formChanged() method (Which you haven't provided yet).
You should use + symbol as shown below,
formChanged(): void {
selected.isConnected = +selected.isConnected;
...
}
No, sadly you're forced to parse it on your own in the formChanged() method, since you always get a string back from the select.
You could try it with something like this:
formChanged(): void {
selected.isConnected = parseInt(selected.isConnected);
// ...
}
You can send a Number variable to select and assign the value for that select element. Then if you want to capture the value when it changes, you can add (change) event to select and retrieve the value as shown below.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<select value="{{isConnected}}" (change)="printConnected($event.target.value)" name="etat" id="etat" class="form-control">
<option value="0">Not connected</option>
<option value="1">Connected</option>
</select>
<div *ngIf="changed">You've selected {{isConnected}}<div>`
})
export class AppComponent {
isConnected : number = 1;
changed : boolean = false;
printConnected(value){
this.isConnected = value;
this.changed=true;
}
}
You can view an example at http://plnkr.co/edit/xO2mrTdpTGufkgXqdhYD?p=preview
I am using reactive bindings and do not want to use [(ngModel)]. Instead I created a piped observable that uses JSON.parse(value) (because +value doesn't handle "null"):
*.component.html:
<div class="col-lg-4 form-group">
<label>Group Type</label>
<select class="form-control" (change)="groupType$.next($event.target.value)">
<option [value]="null"></option>
<option *ngFor="let groupType of filterData.groupTypes" [value]="groupType.id">{{groupType.label}}</option>
</select>
</div>
<div class="col-lg-4 form-group" *ngIf="filteredGroups$ | async as groupOptions">
<label>Group</label>
<select class="form-control" (change)="group$.next($event.target.value)">
<option [value]="null"></option>
<option *ngFor="let group of groupOptions" [value]="group.id">{{group.label}}</option>
</select>
</div>
<div class="col-lg-4 form-group">
<label>Status</label>
<select class="form-control" (change)="status$.next($event.target.value)">
<option [value]="null"></option>
<option *ngFor="let status of filterData.statuses" [value]="status.id">{{status.label}}</option>
</select>
</div>
*.component.ts:
group$ = new BehaviorSubject<string>(null);
groupId$ = this.group$.pipe(
map((groupId: string) => JSON.parse(groupId) as number)
);
groupType$ = new BehaviorSubject<string>(null);
groupTypeId$ = this.groupType$.pipe(
map((typeId: string) => JSON.parse(typeId) as number)
);
status$ = new BehaviorSubject<string>(null);
statusId$ = this.status$.pipe(
map((statusId: string) => JSON.parse(statusId) as number)
);
[ngValue] is intended for objects. It generates an artificial option value even for numeric constants. For those who might be concerned about tests or readability, you can expand two way binding microsyntax
<select [ngModel]="selected.isConnected"
(ngModelChange)="selected.isConnected=$event && +$event" id="etat">
<option value="0">Not connected</option>
<option value="1">Connected</option>
</select>