Как обновить угловую реактивную форму с помощью API, когда обновления дают нулевое значение

Как обновить угловую реактивную форму, мой код не работал при обновлении формы, он возвращает только старое значение, пожалуйста, помогите мне, как обновить угловую реактивную форму.

редактировать-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>

1
3 544
1

Ответ:

Решено

редактировать-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 }); 

    }); 

  }


}