i creating a SPA with vue.js, in the form component want that when finish submit redirect to list component but happen that Uncaught (in promise) TypeError: Cannot read property 'data' of undefined.
I do not know why this error occurs if someone could correct my code, I would appreciate a clear explanation that I am doing wrong
<template>
<div class="row center-element">
<h1 class="pink-text center-align">{{title}}</h1>
<form class="col s12 m12 " #submit.prevent="save">
<div class="row ">
<div class="input-field col s12 m12">
<i class="material-icons prefix light-blue-text">pets</i>
<input id="name" type="text" class="validate" v-model="form.name">
<label for="name">name</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12 m12">
<i class="material-icons prefix light-blue-text">image</i>
<input id='image' type="file">
<div class="file-path-wrapper ">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="row right-align">
<button class="btn-floating waves-effect waves-light light-blue " type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<router-link to="/" class="btn-floating waves-effect waves-light light-blue ">
<i class="material-icons right">cancel</i>
</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return{
title:'Create',
store: '/admin/animals',
method: 'post',
form:{},
errors:'',
msm:''
}
},
beforeMount() {
if(this.$route.meta.mode === 'edit') {
this.title = 'Edit'
this.form.name = this.$route.params.name
this.store = 'animals/' + this.$route.params.id
this.method = 'post'
}
},
methods:{
save(){
let vm = this
let formData = new FormData();
formData.append('name',this.form.name)
formData.append('image',image.files[0])
if (this.title==='Edit') {
formData.append('_method', 'PATCH')
}
axios[this.method](this.store, formData).then(function(response) {
vm.$route.push('/list')
}).catch(function(error) {
Vue.set(vm.$data, 'errors', error.response.data)
})
},
}
}
</script>
I managed to solve the errors in the code,
there are several errors:
1.the line code vm.$route.push('/list'), generates an error for which the response.data property is not defined
2.the parameter that receive the function push() is the problem,i had to change '/list' for a variable redirect:'list'
<template>
<div class="row center-element">
<h1 class="pink-text center-align">{{title}}</h1>
<form class="col s12 m12 " #submit.prevent="save">
<div class="row ">
<div class="input-field col s12 m12">
<i class="material-icons prefix light-blue-text">pets</i>
<input id="name" type="text" class="validate" v-model="form.name">
<label for="name">name</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12 m12">
<i class="material-icons prefix light-blue-text">image</i>
<input id='image' type="file">
<div class="file-path-wrapper ">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="row right-align">
<button class="btn-floating waves-effect waves-light light-blue " type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<router-link to="/" class="btn-floating waves-effect waves-light light-blue ">
<i class="material-icons right">cancel</i>
</router-link>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return{
title:'Create',
store: '/admin/animals',
method: 'post',
form:{},
errors:'',
msm:'',
redirect:'/'
}
},
beforeMount() {
if(this.$route.meta.mode === 'edit') {
this.title = 'Edit'
this.form.name = this.$route.params.name
this.store = 'animals/' + this.$route.params.id
this.method = 'post'
}
},
methods:{
save(){
let vm = this
let formData = new FormData();
formData.append('name',this.form.name)
formData.append('image',image.files[0])
if (this.title==='Edit') {
formData.append('_method', 'PATCH')
}
axios[this.method](this.store, formData).then(function(response) {
Vue.set(vm.$data,'msm',response.data)
vm.$router.push(vm.redirect)
}).catch(function(error) {
Vue.set(vm.$data, 'errors', error)
})
},
}
}
</script>
Related
the tutorial video: https://www.youtube.com/watch?v=1NrHkjlWVhM&t=2693s
github: https://github.com/godzillalogan/markdownblog
my blog: https://gentle-inlet-86339.herokuapp.com/
I have a blog in node.js and framework express.js, i use the way of the the tutorial video to install the markdown blog. but have a problem.
original the article in my blog
but when every time I edit the article
It always has blank space in front of every paragraph.
I don't know if it's my way of store the article is wrong or
using HTML textarea has problem.
thank you for your help
edit articles in routes/modules/admin.js:
//edit article
router.put('/articles/:id', upload.single('image'), async (req, res)=>{
try{
const _id = req.params.id
const { title,description,markdown,category } = req.body
const { file } = req // 把檔案取出來
const article = await Article.findOne({ _id})
if (file){
// const filePath = await imgurFileHandler(file) // 把檔案傳到 file-helper 處理
imgur.setClientID(IMGUR_CLIENT_ID)
imgur.upload(file.path,async (err, img) =>{
// Article.update({...req.body, image: file ? img.data.link: article.image})
article.title = title
article.description = description
article.markdown = markdown
article.category = category
article.image = img.data.link
await article.save()
})
}else{
article.title = title
article.description = description
article.markdown = markdown
article.category = category
await article.save()
}
res.redirect('/admin/articles')
}catch(e){
console.log(e)
res.redirect(`/admin/articles`)
}
// const {title,description,markdown} = req.body //和new一樣才能將markdown轉成html
// Article.create({...req.body})
// res.redirect('/')
})
views/edit:
<div class="container">
<div class="row grid">
<div>
<nav class="userSidebar fixed mt-3">
<div class="buttonList mt-5">
<div class="navItem index d-flex mb-4">
<div class="icon d-flex align-items-center color-blue">
<i class="fas fa-home my-auto"></i>
</div>
<a href="/admin/articles" class="btn">
<span class="fs-5 fw-bolder color-blue">文章清單</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/users" class="btn">
<span class="fs-5 fw-bolder">使用者列表</span>
</a>
</div>
<div class="navItem userProfile d-flex mb-4">
<div class="icon d-flex align-items-center">
<i class="fas fa-users"></i>
</div>
<a href="/admin/categories" class="btn">
<span class="fs-5 fw-bolder">種類列表</span>
</a>
</div>
<a href="/admin/logout" class="btn">
<span class="fs-5 fw-bolder">登出</span>
</a>
</div>
</nav>
</div>
<div>
<h1 class="mb-4">Edit Article</h1>
<form action="/admin/articles/{{article._id}}?_method=PUT" method="POST" enctype="multipart/form-data">
{{>formFields}}
</form>
</div>
</div>
</div>
views/partials/formFields.hbs:
<div class="form-group mb-3">
<label for="title">Title</label>
<input require value="{{article.title}}" type="text" name="title" id="title" class="form-control">
</div>
<div class="form-row mb-3">
<label class="form-label" for="image">Image</label>
<input class="form-control" type="file" class="form-control-file" id="image" name="image">
</div>
<div class="form-group mb-3">
<label for="category">category</label>
<select name="category" id="category" class="form-control">
{{#each categories}}
<option value="{{this.categoryEnName}}"
{{#ifCond this.categoryName ../article.category}}
selected
{{/ifCond}}>
{{this.categoryName}}
</option>
{{/each}}
</select>
</div>
<div class="form-group mb-3">
<label for="title">Description</label>
<textarea name="description" id="description" class="form-control">{{article.description}}</textarea>
</div>
<div class="form-group">
<label for="markdown">Markdown</label>
<textarea required name="markdown" id="markdown" class="form-control" rows="15" cols="80">{{article.markdown}}</textarea>
</div>
Cancel
<button type="submit" class="btn btn-primary mt-3">Save</button>
I have the following select box:
<select class="form-control select2-single" data-width="100%" name="numero_projet" id="numero_projet">
<option label=" "> </option>
#foreach($projets as $projet)
<option data-id="{{$projet->id_projet}}" value="{{$projet->id_projet}}">{{$projet->numero_projet}}</option>
#endforeach
</select>
And the following ajax code to get data :
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
success:function(html){
var content = html.content;
$("div.name_casting").append(content.id_casting);
}
})
})
})
</script>
And the following controller:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return response()->json(['projets_casting' => $projets_casting]);
}
}
And I have the following view where I should display the data that I get from controller:
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select from Library</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#foreach($projets_casting as $projet_casting)
<div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
<div class="accordion" id="accordion">
<div class="mb-2">
<button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="icon-container">
<i class="simple-icon-arrow-down"></i>
</span>
<span class="folder-name">Castings</span>
</button>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100">
<p class="truncate mb-0">{{$projet_casting->id_casting}}</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary sfl-submit">Selectionner</button>
</div>
</div>
</div>
It should display in this div the id_casting of each projects
<div class="w-100 name_casting">
<p class="truncate mb-0">ok</p>
</div>
But I get the following error:
Uncaught TypeError: Cannot read property 'id_casting' of undefined
What is wrong with my code?
Update
I have the following HTML in my view:
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="col-6 mb-1 sfl-item-container casting"
data-preview-path="img/products/chocolate-cake-thumb.jpg"
data-path="img/products/chocolate-cake-thumb.jpg"
data-label="chocolate-cake-thumb.jpg">
<div class="card d-flex mb-2 p-0 media-thumb-container casting2">
<div class="d-flex align-self-stretch">
<img src="img/products/chocolate-cake-thumb.jpg" alt="uploaded image"
class="list-media-thumbnail responsive border-0" />
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100 castings">
<p class="truncate mb-0">OK</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And I'm trying the following script:
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = ` <div">
<p class="truncate mb-0">${json.id_casting}</p>
</div>`;
$("div.name_casting").append(content);
}
})
})
</script>
But I have nothing. I have always OK and I have no error!
UPDATE2
Now I can get the data that I want, but I get multiple rows in the same time so I should having multiple divs in my HTML.
I'm getting the following result:
While I shoult get the 18 in a div and 19 in other div and not in the same place.
Analogous to #professor's answer:
Use the JSON (recommended)The Controller doesn't have to be modifiedIn your blade/JavaScript, change the following:
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
dataType:"json",
success:function(json){
renderTemplate(json)
}
});
function renderTemplate(json) {
var content = `<div>
${json.castings.map((casting) => casting.id_projet)}
</div>`;
$("div.name_casting").append(content);
}
Use the HTMLThe blade view and JavaScriptIn your controller, change the following:
public function getProjet()
{
if(request()->ajax())
{
$id_projet = request('numero_projet');
$projets_casting = Projet_Casting::where('id_projet',$id_projet)->get();
return view('your-view', ['projets_casting' => $projets_casting]);
}
}
I try to update my recipe which has collection of ingredients(formArray) and i have problem with that because of formArray.
I have error on console:
ERROR Error: formArrayName must be used with a parent formGroup directive
When i update recipe without formArray(ingredients) it's working fine.
Could you give me a hint ?
It's my first time when i'm working with formArrays..
My code:
Component.ts
export class RecipeEditComponent implements OnInit {
#ViewChild('editForm') editForm: NgForm;
recipe: IRecipe;
photos: IPhoto[] = [];
ingredients: IIngredient[] = [];
uploader: FileUploader;
hasBaseDropZoneOver = false;
baseUrl = environment.apiUrl;
currentMain: IPhoto;
constructor(private route: ActivatedRoute, private recipeService: RecipeService,
private toastr: ToastrService) { }
ngOnInit(): void {
this.loadRecipe();
}
Html
<div class="container mt-4 border" *ngIf="recipe">
<form #editForm="ngForm" id="editForm" (ngSubmit)="updateRecipe(recipe.id)" >
<h5 class=" text-center mt-2">Recipe details:</h5>
<div class="form-group mt-3">
<label for="city">Name</label>
<label for="city">{{recipe.id}}</label>
<input class="form-control" type="text" name="name" [(ngModel)]="recipe.name">
</div>
<div class="form-group">
<div formArrayName="ingredients"
*ngFor="let ingredient of recipe.ingredients; let i = index;">
<div formGroupName= {{i}} class="row">
<div class="form-group col-6">
<app-text-input formControlName="name" [label]='"Name"' name="ingredient[i].name"></app-text-input>
</div>
<div class="form-group col-6">
<app-text-input formControlName="amount" [label]='"Amount"' [type]="'number'" name="ingredient[i].amount"></app-text-input>
</div>
</div>
</div>
</div>
<h5 class=" text-center mt-4">Description</h5>
<angular-editor cols=100% rows="6" [placeholder]="'Your description'" [(ngModel)]="recipe.description" name="description"></angular-editor>
</form>
<h3 class="text-center">Photos</h3>
<div class="row">
<div class="col-sm-2" *ngFor="let photo of recipe.recipePhotos">
<img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
<div class="text-center">
<button type="button" class="btn btn-sm mr-1 mb-2"
(click) = "setMainPhoto(photo)"
[disabled]="photo.isMain"
[ngClass] = "photo.isMain ? 'btn-danger active' : 'btn-secondary'"
>Main</button>
<button type="button" class="btn btn-sm btn-danger mb-2"
(click)="deletePhoto(photo.id)" >
<i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
<div class="row justify-content-md-center mt-5 border">
<div class="col col-sm-4">
<div class="mt-4 text-center">
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple="true" /><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
</div>
<div class="col col-sm-6">
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="card bg-faded p-3 text-center mt-3 mb-3 my-drop-zone">
<i class="fa fa-upload fa-3x"></i>
Drop Photos Here
</div>
</div>
</div>
<div class="col-md-6 mt-5" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">
<h3 class="text-center">Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.options.isHTML5">
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress mb-4" >
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="fa fa-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="fa fa-ban"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="fa fa-trash"></span> Remove
</button>
</div>
</div>
<button [disabled]="!editForm.dirty" form="editForm" class="btn btn-success btn-block mb-5 mt-5">Save changes</button>
</div>
This is how my recipe looks like with properties:
Problem Description
The directive formArrayName is a ReactiveForm directive and for it to work you must have below satisfied
Must have a parent formGroup
You must have imported ReactiveFormModule in your module
Solution
You may have to do some changes to implement this, see below
See Demo On Stackblitz
name = 'Angular ' + VERSION.major;
recipe = {
id: 1,
name: 'Test Recipe',
ingredients: [{
name: 'Chicken',
amount: 5
},
{
name: 'Pasta',
amount: 50
}],
description: 'Test Description'
}
ngForm = this.fb.group({
description: [this.recipe.description],
name: [this.recipe.name],
ingredients: this.fb.array(
this.recipe.ingredients.map(
ingredient => this.fb.group({
name: [ingredient.name],
amount: [ingredient.amount]
})
)
)
})
updateRecipe() {
}
<form [formGroup]="ngForm" id="editForm" (ngSubmit)="updateRecipe()">
<h5 class=" text-center mt-2">Recipe details:</h5>
<div class="form-group mt-3">
<label for="city">Name</label>
<label for="city">{{recipe.id}}</label>
<input class="form-control" type="text" formControlName='name'>
</div>
<div class="form-group">
<div formArrayName="ingredients" *ngFor="let ingredient of recipe.ingredients; let i = index;">
<div formGroupName={{i}} class="row">
<div class="form-group col-6">
<app-text-input formControlName="name" [label]='"Name"' name="ingredient[i].name">
</app-text-input>
</div>
<div class="form-group col-6">
<app-text-input formControlName="amount" [label]='"Amount"' [type]="'number'"
name="ingredient[i].amount"></app-text-input>
</div>
</div>
</div>
</div>
<h5 class=" text-center mt-4">Description</h5>
<angular-editor cols=100% rows="6" [placeholder]="'Your description'"
formControlName='description'></angular-editor>
</form>
Instead of using FormArrays in your template, try using NgModel for input data-binding:
<div class="form-group" *ngFor="let ingredient of recipe.ingredients; let i = index;">
<div class="form-group col-6">
<input [(ngModel)]="ingredient.name" />
</div>
<div class="form-group col-6">
<input [(ngModel)]="ingredient.amount" />
</div>
</div>
I have "edit information" component with input fields.
Here's its HTML:
<form class="form form-validate" ngNativeValidate
(submit)="editInformationFunction($event)"
#editForm="ngForm">
<div class="row px-3 pb-3">
<!---------------Panel1 ------------------->
<div class="panel panel-primary radius">
<div class="panel-heading border-bottom p-2">
<h3 class="panel-title m-0"><i class="fa fa-user green pl-3"> </i> <span
class="ml-2 font-weight-bold">PERSONAL INFORMATION</span>
</h3>
<span class="pull-right "><i class="glyphicon glyphicon-chevron-down"> </i></span>
</div>
</div>
<div class="panel-body">
<div class="row">
<!--input fields-->
<div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6">
<div class="form-group mt-4 ml-4">
<label for="name"><b>NAME<span class="text-danger ml-2">*</span> </b></label>
<input id="name" type="text" class="form-control"
[(ngModel)]="editInformationModel.name"
[ngModelOptions]="{standalone: true}" required>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6">
<div class="form-group mt-4 mr-4">
<label for="info"><b>BIRTH DATE
</b></label>
<input id="info" type="month" max="{{currentDate}}"
class="form-control"
[(ngModel)]="editInformationModel.birth_date"
[ngModelOptions]="{standalone: true}">
</div>
</div>
</form>
here's the Ts file in which i am getting the service
ngOnInit() {
this.submitService.onFormSubmit().subscribe((submitting) => {
console.log("edit information");
if (submitting) {
console.log("edit information2");
this.editInformationFunction();
}
});
}
here is my submit service:
export class SubmitService {
private submitSubject = new Subject<any>();
constructor() {
// this.submitSubject = new Subject<boolean>();
}
submitButton(submitting: boolean): void {
console.log("service1")
this.submitSubject.next(submitting);
}
onFormSubmit(): Observable<any> {
console.log("service2")
return this.submitSubject.asObservable();
}
}
here is my html component where button is added:
<button type="submit" class="btn btn-success btn-sm py-2 border-0"
(click)="submitFunction($event)" *ngIf="userModel.fid ==
householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1"
><i class="fa fa-save"> </i>
Save Information
</button>
here is the function where submitting the form
submitFunction(e) {
console.log("sidebar")
this.submitService.submitButton(true);
}
I have tried e.preventDefault() but don't know what is the reason of getting success message several times.
Is there anything wrong with my code? need help
You need to unsubscribe from onFormSubmit()
import {Subscription} from 'rxjs';
...
submitServiceSubscription: Subscription;
ngOnInit() {
this.submitServiceSubscription = this.submitService.onFormSubmit().subscribe(
(submitting) => {
console.log("edit information");
if (submitting) {
console.log("edit information2");
this.editInformationFunction();
}
}
);
}
ngOnDestroy(){
this.submitServiceSubscription.unsubscribe();
}
Modify the button to remove the (click) since by default behaviour it will submit the form. -
<button type="submit" class="btn btn-success btn-sm py-2 border-0" *ngIf="userModel.fid == householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1">
<i class="fa fa-save"> </i>
Save Information
</button>
When you click this button, editInformationFunction($event) will be called since it is the submit event in the form declaration.
__ Update __
You can also remove the (submit) call from form declaration and keep it -
<form class="form form-validate" ngNativeValidate #editForm="ngForm"> ...
And change the button. Remove the type="submit" and keep just (click) -
<button class="btn btn-success btn-sm py-2 border-0"
(click)="submitFunction($event)" *ngIf="userModel.fid == householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1">
<i class="fa fa-save"> </i>
Save Information
</button>
The idea is that you submit the form only once.
If this does not work, then try modifying the button to input with type='button'.
Hi I am a beginner in Angularjs and was trying to implement edit of a field and trying to save the data..
The below is the html:-
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save()">save</button>
<button ng-click="closepopup()">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
The below is the js:-
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
angular.copy($scope.address[$index], $scope.address);
}
$scope.closepopup=function(){
$scope.istrue=false;
}
$scope.save = function() {
$scope.istrue=false;
angular.copy($scope.addresses, $scope.addresses[0])
Address.save($scope.addresses)
};
I am trying to fetch and save the data in the service Address which gets getting the value from the database
You need store edit state in each address
So html
<div class="row" ng-if="showme=='false'">
<div class="myaddress">
<div class="card-addresses">
<div class="card card-address" ng-repeat="address in addresses" ng-click="selectAddress(address)" ng-class="{active : selectedAddress === address}">
<div class="overlay">
<div class="icon icon-approved"></div>
</div>
<div class="card-header">
<div class="pull-left"><span>{{address.label}}</span></div>
<div class="pull-right"><i class="fa fa-pencil" ng-click="editAddress(address)"></i>
<div class="editpopup editpopup-{{address.istrue}}">
<p>edit id:
<input type="text" ng-model="address.street"/>
</p>
<p>edit pname:
<input type="text" ng-model="address.station"/>
</p>
<button ng-click="save(address)">save</button>
<button ng-click="closepopup(address)">cancel</button>
</div> <i class="fa fa-trash" ng-click="delAddress(address)"></i>
</div>
</div>
<div class="card-block">
<p>{{address.building}}</p>
<p>{{address.street}}</p>
<p>{{address.station}} {{address.city}} - {{address.pincode}}</p>
</div>
<div class="card-footer"><span>Default</span></div>
</div>
</div>
<button class="btn btn-success btn-block" type="button" ng-click="addAddress()">Add New Address</button>
</div>
And js
$scope.editrow=function($index){
$scope.istrue=true;
$scope.$index = $index;
//angular.copy($scope.address[$index], $scope.address); // why you need this?
}
$scope.closepopup=function(address){
address.istrue=false;
}
$scope.save = function() {
address.istrue=false;
// angular.copy($scope.addresses, $scope.addresses[0])// why you need this?
Address.save($scope.addresses)
};