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
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
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.
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>
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>
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>