Как обновить угловую реактивную форму, мой код не работал при обновлении формы, он возвращает только старое значение, пожалуйста, помогите мне, как обновить угловую реактивную форму.
редактировать-blog.component.ts
import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-edit-blog',
templateUrl: './edit-blog.component.html',
styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
editBlogForm = new FormGroup({
title: new FormControl(''),
blog: new FormControl(''),
});
user: User[];
//data:any;
submitted = false;
id: number;
constructor(private router: Router,
private formBuilder: FormBuilder,
public flashMessageService: FlashMessagesService,
private authenticationService: AuthenticationServiceService,
private userService: UserService) { }
get f() { return this.editBlogForm.controls; }
ngOnInit() {
this.editBlogForm = this.formBuilder.group({
title: ['', Validators.required],
blog: ['', Validators.required],
});
//console.log('hjkhjk',this.users);
//console.log('my form: ', this.editBlogForm)
// this.editUserBlog()
const id = this.userService.getCurrentId();
this.userService.editUserBlog(id).pipe(first()).subscribe(user => {
user = user;
this.editBlogForm.setValue({
title: user["0"].title,
blog: user["0"].blog,
});
});
}
onSubmit(user: User) {
this.editBlogForm.patchValue({
title: user.title,
blog: user.blog,
});
//console.warn(this.editBlogForm.value);
this.userService.update(user).subscribe(user => {
user = user;
this.flashMessageService.show('Blog Updated successfully.',
{ cssClass: 'alert alert-danger alert-dismissible fade in', timeout: 3000 });
console.log(user);
});
}
}
ниже приведены мои сервисы, в которых выполнена функция обновления, и эта функция вызывается onSubmit . Функция onSubmit, созданная в edit-blog.component.ts, пожалуйста, помогите мне, как обновить это в базе данных, я использую laravel api
user.service.ts
update(user: User) {
return this.http.put(`http://localhost:8000/api/blog-update/${this.id}`, user);
}
редактировать-mlog.component.html
<div>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6" style="margin-top: 60px">
<h2>Update your blog here..</h2>
<form [formGroup]="editBlogForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<input type="text" formControlName="title" class="input" [ngClass]="{ 'is-invalid': submitted && f.title.errors }"
placeholder="Title" />
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Title is required</div>
</div>
</div>
<div class="form-group">
<app-ngx-editor type="text" formControlName="blog" height="250px" minHeight="50px" class=""
[placeholder]="'Enter text here...'" [spellcheck]="true" [ngClass]="htmlContent"></app-ngx-editor>
<div *ngIf="submitted && f.blog.errors" class="invalid-feedback">
<div *ngIf="f.blog.errors.required">Blog is required</div>
</div>
</div>
<div class="form-group">
<button type="submit" [disabled]="!editBlogForm.valid" class="btn btn-primary">Update</button>
</div>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
редактировать-blog.component.ts
import { Component, OnInit } from '@angular/core';
import { Blog } from '../_models/blog';
import { UserService } from '../_services';
import { User } from '../_models'
import { Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { AuthenticationServiceService } from '../_services';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-edit-blog',
templateUrl: './edit-blog.component.html',
styleUrls: ['./edit-blog.component.css']
})
export class EditBlogComponent implements OnInit {
resizer: string;
editBlogForm = new FormGroup({
title: new FormControl(''),
blog: new FormControl(''),
});
user: User[];
//data:any;
submitted = false;
id: number;
constructor(private router: Router,
private formBuilder: FormBuilder,
public flashMessageService: FlashMessagesService,
private authenticationService: AuthenticationServiceService,
private userService: UserService) { }
get f() { return this.editBlogForm.controls; }
ngOnInit() {
this.editBlogForm = this.formBuilder.group({
title: ['', Validators.required],
blog: ['', Validators.required],
});
//console.log('hjkhjk',this.users);
//console.log('my form: ', this.editBlogForm)
// this.editUserBlog()
const id = this.userService.getCurrentId();
this.userService.editUserBlog(id).pipe(first()).subscribe(user => {
user = user;
this.editBlogForm.setValue({
title: user["0"].title,
blog: user["0"].blog,
});
});
}
onSubmit(user) {
user={}
user['title']= this.editBlogForm.get('title').value;
user['blog']= this.editBlogForm.get('blog').value;
//console.warn(this.editBlogForm.value);
this.userService.update(user).subscribe(user => {
user = user;
this.router.navigate(['blog-list']);
this.flashMessageService.show('Blog Updated successfully.',
{ cssClass: 'alert alert-success', timeout: 3000 });
});
}
}