We Keep Coding

Copy input fields created from *ngFor to input fields in an outer modal

I want to build a pop-up modal edit form to change individual table values in a dynamic grid. Right now, the input fields appear on button click using the function editToggle(i). No more than 4 input fields will ever appear because they are meant to edit the 4 values in my data model. However, the input fields (and values) are being dynamically generated with *ngFor. I need some way to pass/copy those input fields to my modal to edit there instead of on the grid itself (where they currently appear after clicking the edit button).
I have tried to use [(ngModel)] to clone but it does not work. I have tried to pass them using functions but the values return null. Because the HTML only shows one input field (because they are being dynamically created with *ngFor) I do not know of a way to individually pass the values.
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}" (change)="EditItem(i, col, $event.target.value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(i); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<input [(ngModel)]="inputClientName" id="editClientName" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<input id="editClientVersion" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<input id="editClientAPIKey" type="text">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<input id="editClientProtectedSecret" type="text">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>
export const PROVIDERS: any[] =
[
{
AppID: "11",
ClientName: "sampleclientname1",
apiKey: "sampleapikey1",
Version: "1.0",
protectedsecret: "samplesecret1"
},
{
AppID: "12",
ClientName: "sampleclientname2",
apiKey: "sampleapikey2",
Version: "1.0",
protectedsecret: "samplesecret2"
},
{
AppID: "13",
ClientName: "sampleclientname3",
apiKey: "sampleapikey3",
Version: "1.0",
protectedsecret: "samplesecret3"
},
{
AppID: "14",
ClientName: "sampleclientname4",
apiKey: "sampleapikey4",
Version: "1.0",
protectedsecret: "samplesecret4"
}
]

You can set a variable named something like selectedRowData and set the provider as its value when the user clicks the edit button. The value attribute of the inputs on the modal can be set to the properties of the selected row. It's difficult to tell what the functionality of the other methods is supposed to be without the component code so I made some assumptions. Let me know if you have any other questions about it.
Here's a link to a StackBlitz.
EDIT
The data is only being bound one way via the [value] attribute and there isn't a form object keeping track of all the changes like there would be using Reactive Forms so a model should be created first.
I commented out the original solution and added updates below. The selectedRowData variable is instantiated with a provider object with empty properties. The modal has been updated to use two-way binding with [(ngModel)]. The StackBlitz has also been updated.
The table is updated as the user types their edits into the form. The save button doesn't need to be used unless the data needs to be persisted somewhere.
Check out the Angular Forms Documentation it should help with how to pass form data around between components. What you've created here is similar to Template-driven Forms.
Component
// selectedRowData = null;
selectedRowData = {
AppID: "",
ClientName: "",
apiKey: "",
Version: "",
protectedsecret: ""
};
editToggle(rowData) {
this.selectedRowData = rowData;
}
Table
<div>
<table align="center">
<tr>
<th>
List of Providers
</th>
</tr>
</table>
<table id="thetable" align="center">
<tr>
<th>Application ID</th>
<th>Client Name</th>
<th>Version</th>
<th>API Key</th>
<th>Protected Secret</th>
<th>EDIT/DELETE</th>
</tr>
<tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
<td *ngFor="let col of columns">
<span class="field" *ngIf="i !== index">
{{prov[col]}}
</span>
<span *ngIf="i === index">
<input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}"
(change)="EditItem(value)" type="text" placeholder="{{prov[col]}}">
</span>
<td>
<span *ngIf="editing && i === index">
<button (click)="save()">Save</button>
</span>
<span *ngIf="i !== index">
<button class="edit" name="editButton" (click)="editToggle(prov); openEditForm()">/</button>
<button class="delete" (click)="deleteRow(i)">x</button>
</span>
</td>
</tr>
</table>
Modal
<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
<div class="modal-content_edit">
<span (click)="save()" class="close">×</span>
<h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
<div>
<label style="margin-bottom: 20px">
Client Name:
</label>
<!-- <input id="editClientName" type="text" [value]="selectedRowData?.ClientName"> -->
<input id="editClientName" type="text" [(ngModel)]="selectedRowData.ClientName">
</div>
<div>
<label style="margin-bottom: 20px">
Version
</label>
<!-- <input id="editClientVersion" type="text" [value]="selectedRowData?.Version"> -->
<input id="editClientVersion" type="text" [(ngModel)]="selectedRowData.Version">
</div>
</div>
<div>
<label style="margin-bottom: 20px">
API Key:
</label>
<!-- <input id="editClientAPIKey" type="text" [value]="selectedRowData?.apiKey"> -->
<input id="editClientAPIKey" type="text" [(ngModel)]="selectedRowData.apiKey">
</div>
<div>
<label style="margin-bottom: 20px">
Protected Secret
</label>
<!-- <input id="editClientProtectedSecret" type="text" [value]="selectedRowData?.protectedsecret"> -->
<input id="editClientProtectedSecret" type="text" [(ngModel)]="selectedRowData.protectedsecret">
</div>
<button style="float: right" class="add" (click)="save()">
<h4 style="font-style: bold">Save</h4>
</button>
<button class="cancel" (click)="save()">
<h4 style="font-style: bold">Cancel</h4>
</button>
</div>
</div>
</div>

vue js multiple dynamic selects population issue

Hello there vue js guru's
Currently i'm creating some wizard with a little bit more "advanced" setup and need some help getting the correct outcome. I tried a few different methods but not with any success yet.
What i'm trying to do is the following:
I'm building a workout create wizard where it's possible to add sections and inside each section you could define one or more movements where each movement itself should have some sort of measurement this last one should change based on the selected movement and could have one or more options as an select to.
The data is fetched by axios (remotely) and saved to the data array for available movements like so:
[
'' => [
1 => [
'name' => 'pull ups',
'measure' => [
0 => 'none',
1 => 'distance',
],
],
2 => [
'name' => 'push ups',
'measure' => [
0 => 'none',
1 => 'weight',
],
],
...
],
...
]
this will then be stored in the this.movements = data.movements; data array in my vue js instance.
Here is my vue js code:
<script>
new Vue({
el: '#workout-wrapper',
data() {
return {
dynamicOptions: [],
name: null,
sections: [{
name: null,
rounds: null,
minutes: null,
measure: null,
movements: [{
reps: null,
movement: null,
measure: null,
remarks: null
}]
}],
movements: [],
...
}
},
methods: {
...
onMovementChange(group, movement) {
// TODO: this one combined with the computed options still isn't working correctly
if (group == '') {
this.options = { section: 0, movement: 0, options: this.movements[""][movement].measure };
} else {
this.options = { section: 0, movement: 0, options: this.movements[group][movement].measure };
}
},
...
},
computed: {
options: {
get(event, data) {
// TODO: now we should only return the options for section and movement indexes
return this.dynamicOptions;
},
set(data) {
this.dynamicOptions[data.section] = [];
this.dynamicOptions[data.section][data.movement] = data.options;
// console.log(this.dynamicOptions);
}
}
},
created() {
axios.get('/workouts/create/data').then(response => {
let data = response.data;
this.movements = data.movements;
...
}).catch(error => {
console.error(error);
});
}
});
</script>
And here the template:
<div class="row m-t-20" v-for="(section, index) in sections">
<div class="col-md-12">
<div class="card card-default no-border">
<div class="card-header separator">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Section name</label>
<div class="input-group m-b-15">
<input type="text" name="sections[0][name]" placeholder="e.g. Warming-Up" class="form-control" v-model="section.name">
<div class="input-group-btn">
<button type="button" class="btn btn-danger" data-title="Remove" data-tooltip #click="removeSection(index)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Rounds</label>
<input type="number" name="sections[0][rounds]" class="form-control" placeholder="Optional" min="0" v-model="section.rounds">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">
Minutes
</label>
<input type="number" name="sections[0][minutes]" class="form-control" placeholder="Optional" min="0" v-model="section.minutes">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Measure</label>
<select name="sections[0][measure]" class="form-control" v-model="section.measure"> {{-- data-init-plugin="select2" --}}
<option :value="key" v-for="(measure, key) in measurements">#{{ measure }}</option>
</select>
</div>
</div>
</div>
</div>
<div class="card-block m-t-25">
<table class="table table-striped">
<thead>
<tr>
<th width="10%">
Reps
</th>
<th width="35%">
Movement
</th>
<th width="20%">
Measure
</th>
<th width="35%">
Remarks
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(movement, movementIndex) in section.movements">
<td>
<input type="number" name="sections[0][movements][0][reps]" class="form-control" min="0" v-model="movement.reps">
</td>
<td>
<select name="sections[0][movements][0][movement]" class="form-control" v-model="movement.movement" #change="onMovementChange('', movement.movement)">
<optgroup :label="group" v-for="(options, group) in movements">
<option :value="key" v-for="(option, key) in options">#{{ option.name }}</option>
</optgroup>
</select>
</td>
<td>
<select name="sections[0][movements][0][measure]" class="form-control" v-model="movement.measure" :disabled="!movement.movement">
<option :value="key" v-for="(measure, key) in options">#{{ measure }}</option>
</select>
</td>
<td>
<textarea name="sections[0][movements][0][remark]" rows="1" class="form-control" v-model="movement.remarks"></textarea>
</td>
<td>
<button type="button" class="btn btn-link text-danger" data-title="Remove" data-tooltip #click="removeMovement(index, movementIndex)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td colspan="5" class="text-center">
<button type="button" class="btn btn-cons btn-complete" data-title="Add movement" data-tooltip #click="addMovement(index)">
<i class="fa fa-plus"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
With this current set up it's adding the data in the second select box but it's always changing, so when adding a second movement row then both select boxes are changing there options based on the selected movement in the second row etc... it should only change based on the current row instead and section off course.
Maybe some of you could help me with this problem... if more info is needed please let me know :-)

Passing an object or object key to a component in VueJs

I have a Personnel table bound to an array of objects that is coming from VueJs. The last column on the table is a button for editing each record.
I'd like to show a modal popup when the edit button is clicked and bind the textboxes to the properties of the personnel that I want to edit. It should update the table and the source of the data when the save button on the modal popup is clicked.
But I am stuck on passing the object or even just the key to the component so I can load the data or bind the edited object into my textboxes.
JS
var app = new Vue({
el: '#my-app',
data: {
personnels: [
{
id: 1,
firstName: 'Billy',
lastName: 'Bob',
email: 'bb#kewl.com'
},
{
id: 2,
firstName: 'Mike',
lastName: 'Coilers',
email: 'mco#kewl.com'
},
{
id: 3,
firstName: 'Fred',
lastName: 'Just',
email: 'freju#gmail.com'
},
{
id: 4,
firstName: 'Tori',
lastName: 'Drury',
email: 'smstua#gmail.com'
}
]
},
methods: {
showPersonnelEditor: function () {
// how do i pass data to the personnelEditor component?
}
}
});
Vue.component('personnel-editor', {
prop: ['personnel']
});
HTML
<div id="my-app">
<table classs="table" width="100%">
<tr>
<th>
Id
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
<th>
Actions
</th>
</tr>
<tr v-for="personnel in personnels">
<td>
{{ personnel.id }}
</td>
<td>
{{ personnel.firstName }}
</td>
<td>
{{ personnel.lastName }}
</td>
<td>
{{ personnel.email }}
</td>
<td>
<button v-on:click="showPersonnelEditor">Edit</button>
</td>
</tr>
</table>
<personnel-editor inline-template><div class="modal fade" >
<div class="modal-dialog">
<div class="modal-header">
header
</div>
<div class="modal-content">
<div class="form-group row">
<div class="col-lg-12">
<label>Id</label>
<input type="text" v-model="personnel.Id" />
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>First Name</label>
<input type="text" v-model="personnel.firstName" />
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>Last Name</label>
<input type="text" v-model="personnel.lastName" />
</div>
</div>
<div class="form-group row">
<div class="col-lg-12">
<label>Email</label>
<input type="text" v-model="personnel.Email" />
</div>
</div>
</div>
<div class="modal-footer">
oh mah foot
</div>
</div>
</div>
</div></personnel-editor>

You can try :
<button v-on:click="showPersonnelEditor(personnel)">Edit</button>
Then in showPersonnelEditor method :
showPersonnelEditor: function (personnel) {
this.selectedPersonnel = personnel; //make sure to declare selectedPersonnel in data
}
And finally in your html template :
<personnel-editor inline-template :personnel=selectedPersonnel><div class="modal fade" >
Hote it helps.
Edit for binding the result of the modal :
You can emit an event when the modal is closed, either with a button or any other closed event depending on your implementation.
This is a code sample for emitting en event :
whenModalClosedMethod() {
this.$emit('personnel-edited', personnel);
}
Then in your template :
<personnel-editor inline-template :personnel=selectedPersonnel v-on:personnel-edited="updatePersonnel">
And then in your root component add a method :
updatePersonnel: function(personnel) {
//look for the correct entry by id in your personnels array and update it
}

Angularjs ng-submit not working inside ng-repeat form

I have this form
<tr ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
In my controller I have
$scope.submit = function() {
console.log('form');
};
If I change ng-submit="submit()" to ng-click="submit()" in button it works, not sure why I am unable to submit the form

The problem is that you have an illegal html structure by nesting a table > tr element with a form. That causes the inner input[type=submit] not to identify his parent form and trigger the submit.
I could get your example working by replacing tables and tr with div and td with spans.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.quotes = [{
business_name: "business_name 1",
quote: "quote1",
status: 1
}, {
business_name: "business_name 2",
quote: "quote2",
status: 1
}]
$scope.submit = function() {
console.log('form');
};
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-controller="myController">
<div ng-repeat="quote in quotes">
<form ng-submit="submit()" name="qut{{$index}}">
<span class="text-left">
{{ quote.business_name }}
</span>
<span class="text-left">
<span ng-if="quote.quote">
{{ quote.quote }}
</span>
<span ng-if="!quote.quote">
<input ng-model="qt" class="form-control" type="text" name="quote" />
</span>
</span>
<span class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</span>
</form>
</div>
</div>

Because multiple same form names are being created.
What you should do is you can create dynamic form names inside ng-repeat.
<tr ng-repeat="quote in quotes">
<form ng-submit="submit(qut{{$index}}.$valid)" name="qut{{$index}}">
<td class="text-left">
{[{ quote.business_name }]}
</td>
<td class="text-left">
<span ng-if="quote.quote">
{[{ quote.quote }]}
</span>
<span ng-if="!quote.quote">
<input ng-model="quote.quote" class="form-control" type="text" name="quote{{$index}}" />
</span>
</td>
<td class="text-left">
<span ng-if="quote.status==1">
<input type="submit" class="btn btn-out" value="Quote" />
</span>
</td>
</form>
</tr>
$scope.submit = function(value) {
console.log('form',value);
};

Build table from angular form data

So I am trying to build a table that takes the form data entered and is stored on the client and pushes each input property into a group to create an object. From there, the table is build using ng-repeat. Code started is below, but nothing is happening. Can anyone assist?
<form class="addClaim" ng-submit="submitClaim(claimInfo)">
<div class="form-group">
<label for="beneSelect">Select your benefit</label>
<select class="form-control" id="beneSelect" >
<option ng-repeat="descr in claim.claimBenes" data-ng-model="claimInfo.providerName">{{ descr.descr }}</option>
</select>
</div>
<div class="form-group">
<label for="start">Date of Service</label>
<div>
<input type="text" class="form-control" id="start" placeholder="--/--/----" data-ng-model="claimInfo.fromDate" style="width: 240px;">
<span>To</span>
<input type="text" class="form-control" id="end" placeholder="--/--/---- (optional)" data-ng-model="claimInfo.toDate" style="width: 240px;">
</div>
</div>
<div class="form-group">
<label for="providerName">Provider Name</label>
<input type="text" class="form-control" id="providerName" data-ng-model="claimInfo.provider">
</div>
<div class="form-group">
<label for="forWhom">For Whom</label>
<input type="text" class="form-control" id="forWhom" data-ng-model="claimInfo.who">
</div>
<div class="form-group" ng-show="claimInfo.benefCode == 'HCFSA'">
<label for="age">Age</label>
<input type="text" class="form-control" id="age" data-ng-model="claimInfo.who">
</div>
<div class="form-group">
<label for="claimAmount">Amount</label>
<input type="text" class="form-control" id="claimAmount" data-ng-model="claimInfo.amount">
</div>
<div class="form-group">
<label for="claimComment">Comments</label>
<textarea class="form-control" rows="5" id="claimComment" data-ng-model="claimInfo.comments"></textarea>
</div>
<div class="form-group">
<label class="control-label"></label>
<div>
<input type="button" class="btn btn-primary" ng-click="saveClaim()" value="add claim" style="float: right;">
</div>
</div>
</form>
The table:
<div class="claimedTable" style="background-color: #ffffff; color: black;">
<table class="table">
<thead>
<tr>
<th>service date</th>
<th>provider</th>
<th>amount</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in claimSubmit">
<td>{{ claimInfo.fromDate }}</td>
<td>{{ claimInfo.provider }}</td>
<td>{{ claimInfo.amount }}</td>
<td><i class="fa fa-pencil-square-o"></i></td>
<td><i class="fa fa-trash-o"></i></td>
</tr>
</tbody>
</table>
</div>
And controller:
$scope.claim = [];
claimsService.getClaim().then(function (results) {
$scope.claim = results.data;
});
// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {
id: "",
benefitId: "",
isSecIns: "",
isNoResId: "",
expenseTypeId: "",
fromDate: "",
toDate: "",
provider: "",
who: "",
depId: "",
age: "",
amount: "",
comments: "",
isOffset: ""
};
$scope.saveClaim = function() {
$scope.claimsSubmit.push($scope.claimInfo);
//clears scope so form is empty
$scope.claimInfo = {};
}
When I enter data into the fields and click submit, nothing ever leaves nor does it post to the table. The reason I want as an object versus an array is because the table may have multiple line items depending on how many times the form is field out and submitted.
Seems somewhere simple I am going wrong, but cannot figure where. Any help please?
Thanks much.

You have a few issues in your code. Here it is cleaned up a bit...
HTML
<form class="addClaim"> // ng-submit not needed in form tag
ng-repeat bindings should be item. not claimsSubmit.
<tr ng-repeat="item in claimsSubmit">
<td>{{ item.fromDate }}</td>
<td>{{ item.provider }}</td>
<td>{{ item.amount }}</td>
<td><i class="fa fa-pencil-square-o"></i></td>
<td><i class="fa fa-trash-o"></i></td>
</tr>
Controller
$scope.claim = []; // This can be removed.
claimsService.getClaim().then(function (results) {
$scope.claim = results.data;
});
// submit all claim objects entered
$scope.claimsSubmit = [];
$scope.claimInfo = {}; // This just needs to create an object.
$scope.saveClaim = function() {
$scope.claimsSubmit.push($scope.claimInfo);
//clears scope so form is empty
$scope.claimInfo = {};
}
This should be enough to get the form populating the table for you. There is obviously form data missing from the table but it will get you going in the right direction.