How to handle multiple input values with same name in meteor and expect array from events.
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
By far the easiest way to scope events in Blaze templates is to define templates at the level at which you need to trap events.
If you have:
<template name="companyEmails">
{{#each companyEmail}}
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
{{/each}}
</template>
Then if you attach an event handler to the companyEmails template you have to figure out which input was changed.
If you change this pattern to:
<template name="companyEmails">
{{#each companyEmail}}
{{> oneCompanyEmail}}
{{/each}}
</template>
<template name="oneCompanyEmail">
<input type="text" class="form-control valid" id="companyEmail" name="companyEmail[]">
</template>
Then you can attach an event handler to the lower level template and be guaranteed that you're getting the correct event on the correct object with the appropriate data context:
Template.oneCompanyEmail.events({
'input #companyEmail': function(ev,err){
var emailAddress = ev.target.value;
console.log(this); // will be the value of companyEmail from the #each
}
});
As always in Meteor you're probably working in a Template scope and creating those inputs dynamically.
if that is the case you need to create an event handler for the input and then capture the concurrent used input using "this", here's an example:
html file:
<template name="emailForm">
{{#each item in items}}
<input name="email" class="email" placeholder="enter email address">
<button class="addEmail">+</button>
{{/each}}
</template>
in your js file:
if(Meteor.isClient) {
Template.emailForm.events({
'click .addEmail': function(event) {
console.log(this);
}
});
}
take a look at what's comes out with "this" and find out how to extract your desired bit of data as it will represent only the clicked item.
Related
I have a custom view component that renders as three select lists, "Year", "Make" and "Model" and it's working well for me.
My problem lies when it's dynamically placed on a parent form... The tab order is out of whack and my research seems to indicate that is normal without a tabindex set.
Let's say I have something like this:
<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"> </my-widget>
<input type="text" v-model="shop" tabindex="5">
How do I tell myWidget to set the tabindex for the selects inside my widget to 2,3,4?
Ideally I'd like to be able to use two of these widgets on the same page so hardcoding wont work.
Does anyone have any thoughts on the best way to assign tabindex inside a component?
You could have the tabindex as a prop on your my-widget component so that it can be dynamic. For example
my-widget component
<template>
<div>
<input type="text" :tabindex="tabindex"/>
<input type="text" :tabindex="tabindex + 1"/>
</div>
</template>
<script>
export default {
props: {
tabindex: {
type: Number,
required: false,
default: 1
}
}
</script>
so then your code will look like
<input type="text" v-model="name" tabindex="1">
<my-widget v-if="someCondition"
:tabindex="2"
> </my-widget>
<input type="text" v-model="shop" tabindex="5">
and if you add another one
<my-widget v-if="someCondition"
:tabindex="6"
> </my-widget>
Using Angular 7.
Have an <input> tag like the following:
<input id="foo" type="text" class="bar" [formControlName]="'product'"
autocomplete="off [ngModel]="formGroup.controls.product.value" [readOnly]="true"/>
Eventually, myControl.setValue('some string'); is called.
The result is the <input> element displays [object Object].
I am trying to display the string from the setValue() call.
What am I doing incorrectly?
try like this you don't need to use [ngModel] you set product control directly
<div [formGroup]="form">
<input id="foo" type="text" class="bar" formControlName="product"
autocomplete="off" [readOnly]="true"/>
<button (click)="update()">Update</button>
</div>
component
form:FormGroup;
constructor(fb:FormBuilder) {
this.form = fb.group({
product:'init data'
});
}
update(){
this.form.get('product').setValue('Updated...')
}
demo 🚀
incase you just have single form control you have to use [formControl] directive
<input id="foo" type="text" class="bar" [formControl]="myControl"
autocomplete="off" [readOnly]="true"/>
<button (click)="update()">Update</button>
component
myControl:FormControl
constructor() {
this.myControl = new FormControl('init data')
}
update(){
this.myControl.setValue('Updated...')
}
demo 🌟
Remove the [ngModel] section of the input, that isn't needed if you're using formControlName as well.
When setting the value, we can't see how you're specifying myControl but the equivalent code would be:
this.formGroup.controls['product'].setValue('my string');
i want to know how pass the value that return this function to the input hidden i try with the directive v-input but doesn't work, how can i found the solution to this?.
here is the computed function:
computed:{
currentDate: function (){
this.date = moment().format("D-MM-YYYY");
return this.date;
}
thats the view:
<input type="hidden" name="customfield" class="form-control" v-model="fillProfile.customfield">
If you expect currentDate to be the value of your hidden field, you should bind it like so:
<input type="hidden" name="customfield" class="form-control" :value="currentDate">
v-model is a two-way binding, and hidden inputs are not interactive, so there is no point in using it.
Have an angular form that I'm passing into my controller.
When I open browser to inspect form, it is undefined. I've tried changing the name of the form, and moving the form tag to enclose the entire body. Here is my form:
<form layout-padding id="form-container" ng-controller="RegisterController as RgCtrl" layout="column" ng-cloak name="projectForm">
<div id="content-row-header">What is your email?</div>
<md-input-container class="md-block md-input-focused">
<label>Email</label>
<input required type="email" name="email" ng-model="email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="projectForm.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<div id="content-row-header">Set a password</div>
<md-input-container class="md-block md-input-focused">
<label>Password</label>
<input required name="password" ng-model="password">
<div ng-messages="projectForm.password.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</form>
Here is my function call:
<md-button id="orange-button" ui-sref="app.unauthenticated.purchase.agent" ng-click="doRegistration(projectForm)" flex>Create Account</md-button>
and here is my controller:
(function () {
'use strict';
angular
.module('app.auth.register')
.controller('RegisterController', RegisterController);
/** #ngInject */
function RegisterController($scope, $auth, $log, $location,$rootScope,$state,app_auth,$stateParams) {
// Data
var vm = this;
// Methods
$scope.doRegistration = function (form) {
console.log(form);
app_auth.register(form.email.$viewValue,form.password.$viewValue,form.passwordConfirm.$viewValue);
};
// $scope.goHome = function () {
/
/ $state.go('app.public');
// };
}
})();
right now when that console.log(form) runs, form is undefined
If you have some conditional directive in the form:
<form name="myForm" ng-if="someVariable">
Then $scope.myForm will be undefined in your controller.
Besides, you should use ng-submit.
you are using a directive.
The directive scope is different from the controllers. That's why you are not able to see the form reference.
GO to directive implementation and add:
scope: {
projectForm: '=',
},
reference: https://www.sitepoint.com/form-based-directives-angularjs/
name attribute will bind form controller to $scope, so you have name="projectForm" in your controller you should be able
to use $scope.projectForm
check jsfiddle here
https://jsfiddle.net/hurricanew/6tqywue6/
Register Controller had to encompass the form definition and function that took in a form as argument
I have the following code to submit a form. If I use the event listener function name as submit, the form does not get submitted. If I use any other name, it will. Should not I use any HTML5 keyword like submit in JavaScript as function name? In this case submit is a HTML5 keyword which can be used as a type of any INPUT element.
<form onsubmit="submit()">
<input type="email" name="email" />
<input type="submit"/>
</form>
function submit() {
var f = $('form').serialize();
alert(f);
}
You're already using jQuery here so a more elegant solution to the whole problem would be:
// HTML
<form name="my-form">
<input type="email" name="email" />
<input type="submit"/>
</form>
Then have a separate JS file:
//Js
$(document).ready(function(){
$('form[name="my-form"]').submit(function(e){
var f=$(this).serialize();
alert(f);
});
});
This also gives you extra options to prevent the form from submitting cleanly; add this at the end of the submit(){ } function.
e.preventDefault();
Update
As the OP pointed out the original question was whether the function name submit() can be used as the onsubmit attribute in a form.
This answer suggests that it cannot, as carrying out the following:
document.form['my-form'].submit();
Would be a valid way to trigger submission of the form; thus that method name can't then be included in the HTML. I am searching now for a better source to confirm this for sure I have found a similar source on Mozilla Developer Network which confirms the code above but doesn't explicitly define that the keyword submit cannot be used.
You know, there is another way to do this. You could separate your html from javascript enritelly.
<form id="form">
<input type="email" name="email" />
<input type="submit"/>
</form>
//Rest of your code
<script>
$(function() {
$('#form').submit(function() {
var f = $('#form').serialize();
// do your stuff
return true; // return false to cancel form action
});
});
</script>