Home » Java » Spring Boot + Angular 5 – http.post null values

Spring Boot + Angular 5 – http.post null values

Posted by: admin June 30, 2018 Leave a comment


I’m working on a project client/server and I’m using spring boot and angular.

So I have a form and i want to take data from the input fields and send it to the back-end, my database ( mySQL ) but the problem is it only adds null fields in my database. I used a tutorial from devglen as inspiration and some tutorials from angular.io

Form input example:

<div class="form-group">
      <label for="body">Body:</label>
      <input type="text"  class="form-control" id="body"
             [ngModel]="article?.body" (ngModelChange)="article.body = $event" name="body">

Model class for the article i want to add:

export class Article {
  id: string;
  title: string;
  abstract_art: string;
  writer: string;
  body: string;

My component for adding:

  selector: 'app-add',
  templateUrl: './add-article.component.html'

export class AddArticleComponent  {

   article: Article = new Article();
   writers: Writer[];

  constructor(private router: Router, private articleService: ArticleService) {

  createArticle(): void {
    this.articleService.createArticle( this.article).subscribe( data => { alert('Article created successfully.');
    console.log('function called!');

  get diagnostic() { return JSON.stringify(this.article); }

The service class:

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json',
    'Authorization': 'my-auth-token'})

export class ArticleService {

  constructor(private http: HttpClient) {}

   // private userUrl = 'http://localhost:8080/articles';
  private articleUrl = '/api';

  public getArticles() {
    return this.http.get<Article[]>(this.articleUrl);

  public deleteArticle(article) {
    return this.http.delete(this.articleUrl + '/' + article.id, httpOptions);

  public createArticle(article) {
    // const art = JSON.stringify(article);
    return this.http.post<Article>(this.articleUrl, article);


And now for the back-end.
Article Class

@Getter @Setter
@ToString @EqualsAndHashCode
public class Article {

    @GeneratedValue(strategy = GenerationType.AUTO)
    private int id;

    private String title;

    private String abstract_art;

    private String writer;

    private String body;

    public Article(String title,String abstract_art, String writer, String body) {
        this.title = title;
        this.body = body;
        this.abstract_art = abstract_art;
        this.writer = writer;


The repository :

//@CrossOrigin(origins = "http://localhost:4200")
public interface ArticleRepository extends JpaRepository<Article,Integer> {

The article service:

public class ArticleServiceImpl implements ArticleService {

    private ArticleRepository repository;

    public Article create(Article article) {
        return repository.save(article);

    public Article delete(int id) {
        Article article = findById(id);
        if(article != null){
        return article;

    public List<Article> findAll() {
        return repository.findAll();

    public Article findById(int id) {

        return repository.getOne(id);

    public Article update(Article art) {
        return null;

And the controller:

public class ArticleController {

   private ArticleService article;

    //Get all articles
    public List<Article> listAll(){
        return article.findAll();

    // Create a new Article
    public Article createArticle(Article art) {
        return article.create(art);

    // Get a Single Article
    public Article getArticleById(@PathVariable("id") int id ){
        return article.findById(id);

    // Delete a Note           /art/

    @DeleteMapping(value = "/{id}")
    public void deleteArticle(@PathVariable("id") int id) {

    public Article update(Article user){
        return article.update(user);

In the picture you can see that it creates my json object but when i’m adding it to the database it only adds null values.

Additional information: I can get data from database and I can delete data from database.

Btw it’s my first post so i’m sorry if i’ve missed some guidelines for posting.
Thank you in advance for your answers. Have a good one!