Cannot read property 'get' of undefined in array - javascript

I need to return value of array by index, but after the variable receive the index the array below return error.
When I select for example "Diminuiu Pouco" I need to set planoCuidadosForm.controls.scorePadraoAlimentar to respective Score in array
component:
export class AppComponent {
planoCuidadosForm: FormGroup;
padraoAlimentar: any[] = [
{ Desc: "Mesmo de Sempre", Score: 1 },
{ Desc: "Diminuiu Pouco", Score: 2 },
{ Desc: "Diminuiu Pela Metade", Score: 3 },
{ Desc: "Diminuiu Muito", Score: 4 },
{ Desc: "Quase Nada", Score: 5 }
];
constructor(
private fb: FormBuilder,
) { }
onInit(){
this.createFormPlanos();
}
createFormPlanos() {
this.planoCuidadosForm = this.fb.group({
ProtocoloMedicoId: [null],
padraoAlimentar: [''],
scorePadraoAlimentar: 0
});
}
calcScoreNut() {
if (this.planoCuidadosForm == null) return;
if (this.planoCuidadosForm.get("padraoAlimentar").value !== null) {
let x = this.padraoAlimentar.indexOf(this.planoCuidadosForm.get("padraoAlimentar").value).valueOf();
console.log('Test ', this.padraoAlimentar[x].Score);
this.planoCuidadosForm.controls.scorePadraoAlimentar.setValue(
this.padraoAlimentar[x].Score
);
}
}
}
HTML:
<form class="form-horizontal ml-2 mr-2 mt-2" [formGroup]="planoCuidadosForm" >
<div class="form-row">
<div class="form-group col-md-6">
<label for="padraoalimentar">Padrão Alimentar</label>
</div>
<div class="form-group col-md-3">
<select class="form-control" id="padraoalimentar" formControlName="padraoAlimentar" (click)="calcScoreNut()">
<option value="null"> -- Selecione -- </option>
<option *ngFor="let pad of padraoAlimentar;let op = index" [value]="pad.Desc">{{ pad.Desc }}</option>
</select>
</div>
<div class="form-group col-md-3">
<div class="input-group">
<label for="scorepadraoalimentar">Score: </label>
<input type="number" formControlName="scorePadraoAlimentar" class="form-control" id="scorepadraoalimentar" [value]="planoCuidadosForm.get('scorePadraoAlimentar').value"
[attr.disabled]="true" />
</div>
</div>
</div>
</form>
https://stackblitz.com/edit/angular-vdkwvg

Your app.component must implement OnInit, and rename your onInit() method to ngOnInit().
export class AppComponent implements OnInit

I has make the change below and and the function works.
calcScoreNut() {
if (this.planoCuidadosForm == null) return;
if (this.planoCuidadosForm.get("padraoAlimentar").value !== null) {
let x = this.padraoAlimentar.find(z => z.Desc == this.planoCuidadosForm.get("padraoAlimentar").value);
this.planoCuidadosForm.controls.scorePadraoAlimentar.setValue(
x.Score
);
}
}
https://stackblitz.com/edit/angular-vdkwvg

Related

Vue TypeScript Undefined value after passing to function of Vuex module

I have async function named save in a my component
async save(): Promise<void> {
if (!this.ValidateForm()) {
notifyError("", "Please enter all fields correctly");
}
else {
await userModule.update(userModule.currentUser?.id as number, this.user, this.file);
notifySuccess("Your profile updated");
}
}
When this line executed :
await userModule.update(userModule.currentUser?.id as number, this.user, this.file);
Value of second and third argument becomes undefined in userModule.update .
In addition i have to say i don't use any arrow function
and i tried console.log(this.user, this.file) everything is ok.
here is my code :
AccountSetting.ts HTML
<template>
<div>
<div class="row justify-content-center">
<!-- left column -->
<div class="col-md-6">
<!-- general form elements -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Change your information</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form>
<div class="card-body">
<div class="form-row">
<div class="col form-group">
<label>Username </label>
<input
type="text"
v-model="user.username"
#change="checkUsername()"
class="form-control"
placeholder="Enter new Username"
/>
<small class="validation">{{ validations.username }}</small>
</div>
<div class="col form-group">
<label>Profile Pricture </label>
<div class="custom-file">
<input
id="customFile"
type="file"
class="custom-file-input"
v-on:change="handleFileUpload($event)"
accept="image/*"
/>
<label class="custom-file-label" for="customFile">{{
lblFilename
}}</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label>Firstname </label>
<input
type="text"
v-model="user.firstname"
#change="checkFirstname()"
class="form-control"
placeholder="Enter your Firstname"
/>
<small class="validation">{{ validations.firstname }}</small>
</div>
<div class="col form-group">
<label>Lastname</label>
<input
type="text"
v-model="user.lastname"
#change="checkLastname()"
class="form-control"
placeholder="Enter your Lastname"
/>
<small class="validation">{{ validations.lastname }}</small>
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label>Email </label>
<input
type="text"
v-model="user.email"
#change="checkEmail()"
class="form-control"
placeholder="Enter your Email address"
/>
<small class="validation">{{ validations.email }}</small>
</div>
<div class="col form-group">
<label>Phone Number</label>
<input
type="text"
v-model="user.phoneNumber"
#change="checkPhonenumber()"
class="form-control"
placeholder="Enter your Phone number"
/>
<small class="validation">{{
validations.phoneNumber
}}</small>
</div>
</div>
<div class="form-row">
<div class="col form-group">
<label>Birthdate </label>
<input
type="date"
v-model="user.birthdate"
class="form-control"
placeholder=""
/>
</div>
<div class="col form-group">
<label>Gender</label>
<div class="form-control">
<div class="form-check form-check-inline">
<label class="form-check-label pr-2" for="inlineRadioMale"
>Male</label
>
<input
id="inlineRadioMale"
type="radio"
name="gender"
value="1"
v-model="user.gender"
class="form-check-input"
checked
/>
</div>
<div class="form-check form-check-inline">
<label
class="form-check-label pl-3 pr-2"
for="inlineRadioFemale"
>Female</label
>
<input
id="inlineRadioFemale"
type="radio"
name="gender"
value="2"
v-model="user.gender"
class="form-check-input"
/>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="button" class="btn btn-primary" #click="save()">
Save
</button>
</div>
</form>
</div>
<!-- /.card -->
</div>
</div>
</div>
</template>
AccountSetting.ts script
import { Component, Vue } from "vue-property-decorator";
import { UserUpdate } from "#/models/user/user";
import userModule from "#/store/modules/user";
import validationUtils from "#/common/validationUtils";
import { notifySuccess, notifyError } from
"#/common/notificationUtils";
import GenderType from "#/common/Enums/genderType";
import { isNullOrEmpty } from "#/common/stringUtils";
#Component
export default class AccountSetting extends Vue {
// eslint-disable-next-line #typescript-eslint/no-explicit-any
private file: any;
private lblFilename = "Choose file";
private user: UserUpdate = {
username: userModule.currentUser?.username as string,
firstname: userModule.currentUser?.firstname as string,
lastname: userModule.currentUser?.lastname as string,
email: userModule.currentUser?.email as string,
birthdate: userModule.currentUser?.birthdate as string,
phoneNumber: userModule.currentUser?.username as string,
gender: userModule.currentUser?.gender as GenderType,
teamId: userModule.currentUser?.teamId as number,
profilePictureId: userModule.currentUser?.profilePictureId as number,
};
// eslint-disable-next-line #typescript-eslint/no-explicit-any
private validations: any = {
username: "",
password: "",
firstname: "",
lastname: "",
email: "",
phoneNumber: "",
};
checkUsername(): void {
if (!validationUtils.isValidUsername(this.user.username)) {
this.validations.username = "Username is invalid";
}
else if (this.user.username.length == 0) {
this.validations.username = "Username is invalid";
}
else if (this.user.username.length > 15) {
this.validations.username = "Username should be less than 15 characters";
}
else {
this.validations.username = "";
}
}
checkEmail(): void {
if (!validationUtils.isValidEmail(this.user.email)) {
this.validations.email = "Email is invalid";
} else {
this.validations.email = "";
}
}
checkFirstname(): void {
if (this.user.firstname.length == 0) {
this.validations.firstname = "Firstname is invalid";
}
else if (this.user.firstname.length > 35) {
this.validations.firstname = "Firstname should be less than 35 characters";
}
else {
this.validations.firstname = "";
}
}
checkLastname(): void {
if (this.user.lastname.length == 0) {
this.validations.lastname = "Lastname is invalid";
}
else if (this.user.firstname.length > 35) {
this.validations.lastname = "Lastname should be less than 35 characters";
}
else {
this.validations.lastname = "";
}
}
checkPhonenumber(): void {
if (this.user.phoneNumber.length == 0) {
this.validations.phoneNumber = "Phone Number is invalid";
}
else {
this.validations.phoneNumber = "";
}
}
ValidateForm(): boolean {
this.checkUsername();
this.checkFirstname();
this.checkLastname();
this.checkEmail();
this.checkPhonenumber();
if (this.user.username == "" || !isNullOrEmpty(this.validations.userUsername)) {
return false;
}
if (this.user.firstname == "" || !isNullOrEmpty(this.validations.firstname)) {
return false;
}
if (this.user.lastname == "" || !isNullOrEmpty(this.validations.lastname)) {
return false;
}
if (this.user.email == "" || !isNullOrEmpty(this.validations.email)) {
return false;
}
if (this.user.phoneNumber == "" || !isNullOrEmpty(this.validations.phoneNumber)) {
return false;
}
return true;
}
// eslint-disable-next-line #typescript-eslint/explicit-module-boundary-types
handleFileUpload(event: any): void {
this.file = event.target.files[0];
this.lblFilename = this.file.name;
}
async save(): Promise<void> {
if (!this.ValidateForm()) {
notifyError("", "Please enter all fields correctly");
}
else {
await userModule.update(userModule.currentUser?.id as number, this.user, this.file);
notifySuccess("Your profile updated");
}
}
}
Vuex module
user.ts :
import {
Action,
getModule,
Module,
Mutation,
VuexModule
} from "vuex-module-decorators";
import modulesNames from "#/store/moduleNames";
import store from "#/store/index";
import localStorageUtils from "#/common/localStorageUtils";
import { User, UserCreate, UserUpdate } from
"#/models/user/user";
import Token from "#/models/authentication/token";
import authenticationService from
"#/services/authentication/authenticationService";
import userService from "#/services/user/userService";
import Login from "#/models/user/login";
import { isEmptyObject } from "#/common/objectUtils";
#Module({ dynamic: true, namespaced: true, store, name: modulesNames.user })
class UserModule extends VuexModule {
private _currentUser?: User = localStorageUtils.getItem("User");
private _authToken?: Token = localStorageUtils.getItem("Token");
get currentUser(): User | undefined | null {
return this._currentUser;
}
get authToken(): Token | undefined | null {
return this._authToken;
}
get isLoggedIn(): boolean {
return !isEmptyObject(this.currentUser);
}
#Mutation
private SET_CURRENT_USER(currentUser?: User): void {
if (currentUser) {
this._currentUser = currentUser;
localStorageUtils.setItem("User", currentUser);
} else {
this._authToken = undefined;
localStorageUtils.removeItem("User");
}
}
#Mutation
private SET_AUTH_TOKEN(authToken?: Token): void {
if (authToken) {
this._authToken = authToken;
localStorageUtils.setItem("Token", authToken);
} else {
this._authToken = undefined;
localStorageUtils.removeItem("Token");
}
}
#Action({ rawError: true })
public async login(login: Login): Promise<void> {
const response = await authenticationService.login(login);
this.SET_CURRENT_USER(response);
}
#Action({ rawError: true })
public async register(userCreateOrUpdate: UserCreate): Promise<void> {
const response = await authenticationService.register(userCreateOrUpdate);
this.SET_CURRENT_USER(response);
}
#Action({ rawError: true })
public async update(id: number, userUpdate: UserUpdate, file: any): Promise<void> {
const response = await userService.updateUser(id, userUpdate, file);
this.SET_CURRENT_USER(response);
}
#Action({ rawError: true })
public async logout(): Promise<void> {
await authenticationService.logout();
this.SET_AUTH_TOKEN(undefined);
this.SET_CURRENT_USER(undefined);
}
}
export default getModule(UserModule);
index.ts
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {},
});
modulesNames.ts :
const modulesNames = {
user: "user",
};
export default modulesNames;
I'm new to javascript and typescript and frontend frameworks .
After many attempts for this problem in stackoverflow an also reading the docs
,I found nothing so i decided to do more debugging and i understand
Vuex actions only take one arguments so another arguments values becomes undefined

Need the value (subtraction of value) to effect the value of another input

I'm trying to the value of money_due and have the value for deposit subtracted from it if the deposit input is holding a value. So far, it is adding it on just fine, but it is not removing it when I empty the value.
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Total Sum Due <span class="note">2</span></label>
<input type="text" class="form-control" v-model="document.money_due" placeholder="">
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Deposit <span class="note">2</span></label>
<input type="text" class="form-control" #change="hasDeposit" v-model="document.deposit" placeholder="">
</div>
</div>
data() {
return {
now: new Date().toISOString(),
document: {
deposit: '',
money_due: '',
}
}
},
this.document.deposit = this.listing.price;
this.document.money_due = this.document.last_month + this.document.security_deposit,
methods: {
hasDeposit() {
if(this.document.deposit == '') {
return this.document.money_due = this.document.money_due + this.document.deposit;
} else {
return this.document.money_due = this.document.money_due;
}
},
mounted() {
this.hasDeposit();
},
Sorry, but it's a bit unclear what you want to achieve with your code.
I created a snippet where I tried to model the deposit and the money_due relations.
new Vue({
el: "#app",
data: {
listing: {
price: 10
},
document: {
last_month: -20,
security_deposit: 10,
deposit: 0,
money_due: 0
},
},
computed: {
hasDeposit() {
return Number(this.document.money_due) + Number(this.document.deposit)
}
},
mounted() {
this.document.deposit = this.listing.price;
this.document.money_due = this.document.last_month + this.document.security_deposit
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Total Sum Due <span class="note">2</span>
<input type="text" class="form-control" v-model="hasDeposit" placeholder=""></label><br />
<label>Deposit <span class="note">2</span>
<input type="text" class="form-control" v-model="document.deposit" placeholder=""></label>
</div>
I mocked the data that's referenced in your code
Moved hasDeposit() from being a method to computed (it only returns a calculated value)
Changed what's in mounted
I hope this is what you were after.

passing data between components in vuejs

I've got my expense tracker app. I've got problem with adding Expense.
I've got two components responsible for this: addCategory.vue and selectCategory.vue.
This is my selectCategory.vue component:
<template>
<div>
<select class="custom-select" #selected="this.$emit('select-cat',category)">
<option v-for="category in categories">{{ category.title }}</option>
</select>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
categories: [],
errors: []
}
},
created() {
axios.get(`http://localhost:3000/categories`)
.then(response => {
this.categories = response.data;
console.log(response.data);
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
and this is my addExpense.vue component:
<template>
<div class="card">
<div class="card-header">
<h4>Dodaj nowy wydatek</h4>
</div>
<form v-on:submit.prevent="addExpense">
<div class="card-body">
<div class="form-group">
<label for="expense-name">Nazwa wydatku</label>
<input type="text" class="form-control" id="expense-name" v-model="Expense.title">
</div>
<div class="form-group">
<label for="expense-amount">Wartość</label>
<input type="number" class="form-control" id="expense-amount" v-model="Expense.amount">
</div>
<div class="form-group">
<label for="expense-date">Data wydatku</label>
<input type="date" class="form-control" id="expense-date" v-model="Expense.date">
</div>
<div class="form-group">
<label for="expense-category">Kategoria</label>
<select-category #select-cat="chooseCategory" v-model="Category.id"></select-category>
</div>
<br>
<div class="form-group">
<button class="btn btn-primary" #click="showAlert">Dodaj nowy wydatek</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios';
import selectCategory from './selectCategory.vue';
export default {
components: {
'select-category': selectCategory
},
data(){
return {
Expense: {
title:'',
amount: '',
date:'',
categoryId:''
},
}
},
methods : {
chooseCategory(){
this.Expense.categoryId = this.Category.id
},
showAlert(){
this.$alert.success({
message: 'Wydatek dodany poprawnie'
})
},
addExpense(){
let newExpense = {
title : this.Expense.title,
amount : this.Expense.amount,
date : this.Expense.date,
categoryId: this.Expense.categoryId
}
console.log(newExpense);
axios.post(`http://localhost:3000/expenses`, newExpense)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
}
}
}
</script>
I need help because when I try to add the Expense, field with 'categoryId' remains empty.
I use Events to pass the name of categories but I dont know how to add category.id to Expense.
The issues in your codes:
you need to add one data property to save which option the user selected, so add one data property=selectedCategory
you didn't bind the value for the options of the select, and you didn't bind the value of the select, so add v-model="selectedCategory" for <select> and add :value="category" for <option>
It seems you bind wrong event (event=selected more likely is the event name you customized) for <select>, change to #change="selectChange(selectedCategory)"
Finally, in addExpense.vue, listen event=select-cat.
Like below demo:
Vue.config.productionTip = false
Vue.component('select-category', {
template: `<div>
<select class="custom-select" v-model="selectedCategory" #change="selectChange(selectedCategory)">
<option v-for="category in categories" :value="category">{{ category.title }}</option>
</select>
</div>`,
data() {
return {
categories: [],
errors: [],
selectedCategory: null
}
},
mounted() {
this.categories = [
{'id':1, 'title': 'abc'},
{'id':2, 'title': 'xyz'}
]
},
methods: {
selectChange: function(newCatetory) {
this.$emit('select-cat',newCatetory)
}
}
})
new Vue({
el: '#app',
data() {
return {
categorySelected: null
}
},
watch: {
categorySelected: function (newVal, oldVal) {
console.log('changed to ' + newVal.id + ' from ' + (oldVal ? oldVal.id : oldVal))
}
},
methods:{
chooseCategory: function(data) {
this.categorySelected = data
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div class="form-group">
<label for="expense-category">Kategoria</label>
<select-category #select-cat="chooseCategory($event)"></select-category>
</div>
</div>

Filter with search and select inputs

I'm not getting any errors but I think I'm just missing something that I cannot see.
My API's are all working. I just wanted to be able to have a search bar to search the names and then a <select> element for searching through departments. Pretty sure my problem is something to do with the filteredList().
Employees.vue
<script>
<template>
<div class="container">
<div class="form-row align-items-center justify-content-center">
<div class="col-md-6">
<label>Name</label>
<input v-model="search" id="inputKeyword" name="inputKeyword" type="text" class="form-control mb-2 form-control-lg">
</div>
<div class="col-md-4">
<label>Department</label>
<select v-model="selectedDepartment" id="inputfilter" name="inputfilter" class="form-control mb-2 form-control-lg select-department">
<option v-for="department in departments" v-bind:key="department.name">
{{ department.name }}
</option>
</select>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<ul class="list-unstyled">
<employee v-for="employee in filteredList" :employee="employee" :key="employee.id"></employee>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
search: '',
selectedDepartment: '',
employees: [],
meta: null,
departments: [],
}
},
computed: {
filteredList() {
if(this.selectedDepartment == this.employees.department){
return this.employees == this.employees.filter(employees => {
return employees.department.toLowerCase().includes(this.selectedDepartment.toLowerCase())
})
}else{
return this.employees.filter(employees => {
return employees.name.toLowerCase().includes(this.search.toLowerCase())
})
}
}
},
methods: {
getEmployees(page){
axios('/employees').then((response) => {
this.employees = response.data.data
this.meta = response.data.meta
})
},
getDepartments(){
axios('/departments').then((response) => {
// console.log(response.data)
this.departments = response.data
})
},
},
mounted() {
this.getEmployees()
this.getDepartments()
}
}
</script>

Angular2 - Model is correct but View is not when pushing to Array

In my Angular2 App (generated using angular-cli), when I do an array.push, the Model (as evidenced by the logged objects/arrays) are correct, but the View has all items overwritten to be equivalent to the newly pushed item. I see this reflected in my UI.
I expected that the Model and View would be in sync, and that any previous items in the array would remain as-is when a new item is pushed to the bottom of the array.
Any ideas how the view is overwritten?
Note that the main guilty function is plusLift().
Github for app
I have an Angular2 Model with an object that has a few nested arrays. I also have some functions to manipulate the model:
lift.store.ts -->
export class Workout {
name: string;
timestamp: Date;
lifts: Lift[];
}
class Lift {
name: string;
sets: Set[];
}
class Set {
reps: number;
weight: number;
weightType: string
}
export class WorkoutStore {
workout: Workout;
weightTypes = [
"Pounds"
]
liftTypes = [
"Dumbbell Shoulder Press",
"Dumbbell Bench Press",
"Curls",
"Push Ups",
"Pull Ups",
"Squats",
"Deadlifts"
]
constructor() {
this.workout = {
name: "New Workout",
timestamp: new Date(),
lifts: [{
name: this.liftTypes[0],
sets: [{
reps: 0,
weight: 0,
weightType: this.weightTypes[0]
}]
}]
}
}
plusSet(key) {
this.workout.lifts[key].sets.push({
reps: 0,
weight: 0,
weightType: this.weightTypes[0]
});
}
minusSet(key) {
this.workout.lifts[key].sets.pop()
}
plusLift() {
this.workout.lifts.push({
name: this.liftTypes[0],
sets: [{
reps: 0,
weight: 0,
weightType: this.weightTypes[0]
}]
})
}
minusLift() {
this.workout.lifts.pop()
}
reset() {
this.workout = {
name: "New Workout",
timestamp: new Date(),
lifts: [{
name: this.liftTypes[0],
sets: [{
reps: 0,
weight: 0,
weightType: this.weightTypes[0]
}]
}]
}
}
}
I use this model as the foundation of a form that can be used to dynamically set up a workout (each workout has one-to-many lifts, and each lift has one-to-many sets).
add-lift.component.ts -->
import { Component, OnInit } from '#angular/core';
import { HorizonService } from '../../shared/horizon.service';
import { WorkoutStore } from '../../shared/lift.store';
#Component({
selector: 'app-add-lift',
templateUrl: 'add-lift.component.html',
styleUrls: ['add-lift.component.css']
})
export class AddLiftComponent implements OnInit {
title = "Add Lift"
addLift() {
this.horizonService.horizon('workouts').store(this.store.workout);
this.reset();
}
plusSet(key) {
this.store.plusSet(key)
}
minusSet(key) {
this.store.minusSet(key)
}
plusLift() {
this.store.plusLift()
}
minusLift() {
this.store.minusLift()
}
reset() {
this.store.reset()
}
constructor(private horizonService: HorizonService, private store: WorkoutStore) { }
ngOnInit() {
}
}
add-lift.component.html -->
<div class="panel panel-default">
<div class="panel-heading">
<h2>{{title}}</h2>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="text" class="form-control" required [(ngModel)]="store.workout.name" name="name">
</div>
<div class="well well-sm col-md-12" *ngFor='let lift of store.workout.lifts; let liftIndex=index'>
<div class="form-group">
<div>
<select class="form-control" id="liftType" name="liftType" required [(ngModel)]=lift.name>
<option *ngFor="let liftType of store.liftTypes" [value]="liftType">{{liftType}}</option></select>
</div>
</div>
<div class="well well-sm col-md-12" *ngFor='let set of lift.sets; let i=index'>
<h5>Set</h5>
<div class="form-group">
<label for="name" class="col-xs-4">Reps</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="reps" required [(ngModel)]="set.reps" name="reps">
</div>
<label class="col-xs-4" for="name">Weight</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="weight" required [(ngModel)]="set.weight" name="weight">
</div>
<label class="col-xs-4" for="weightTypes">Type</label>
<div class="col-xs-8">
<select class="form-control" id="weightTypes" name="weightType" [(ngModel)]=set.weightType required>
<option *ngFor="let weightType of store.weightTypes" [value]="weightType">{{weightType}}</option></select>
</div>
</div>
</div>
<button (click)="plusSet(liftIndex)">+</button>
<button (click)="minusSet(liftIndex)">-</button>
</div>
<button (click)="plusLift()">+</button>
<button (click)="minusLift()">-</button>
<br>
<br>
<button (click)="addLift()" class="btn btn-success">Save Lift!</button>
<button (click)="reset()" class="btn btn-default">Reset</button>
</form>
</div>
</div>

Categories

Resources