Angular 8 Реактивная форма Post Данные не сохраняются в Django Rest API

Question

создал django rest api, который работает нормально. Создано угловое 8 приложение, которое обрабатывает отправку форм для вкладок с переключателями и без них.

файл register.component.ts

import { Component, OnInit } from '@angular/core';
import { Rider } from 'src/app/rider';
import { DataService } from 'src/app/data.service';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {

riderForm:FormGroup;
resForm:FormGroup;



  rider: Rider;
  restaurant: Restaurant;
  submitted = false;

  constructor(private dataService: DataService, private fb: FormBuilder) { }

  ngOnInit() {
    this.resForm= this.fb.group({
      name: [''],
      first_name: [''],
      email:  [''],
      contact: [''],
      city: [''],
      delivery: [''],
    });

    this.riderForm=this.fb.group({
      first_name: [''],
      other_name: [''],
      contact: [''],
      city: [''],
    });
  }

  newRider():void{
    this.submitted=false;
    this.rider=new Rider();
  }
  saveRes(){
    this.dataService.addRestaurant(this.restaurant).subscribe(
      data => {
        console.log(data);
      },
      error => console.log(error)
        );
  }

  saveRider(){
    console.log(this.riderForm.value);
    this.dataService.addRider(this.riderForm.value).subscribe(
       resp => {
         console.log('success',resp);
         this.submitted=true;
        },      
      error => console.log(error));
     }

  onSubmitRider(){this.saveRider();
  }
}

файл службы данных работает на момент публикации этого вопроса, я не знаю, почему данные поста не сохраняются в django rest APIсервер, который я создал, но значения формы отображаются на консоли разработчика браузера.

это служебный файл для углового приложения, data.service.ts

import { Injectable } from '@angular/core';
import { catchError, map, tap } from 'rxjs/internal/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Router } from '@angular/router'
import { Rider } from './rider';
import { Email } from './email';
import { Restaurant } from './restaurant';


@Injectable({
  providedIn: 'root'
})
export class DataService {

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


  baseUrl: string = 'http://127.0.0.1:8000';

  constructor(private http: HttpClient, private _router: Router) { }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error); // log to console instead
      console.log(`${operation} failed: ${error.message}`);
      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

  addRestaurant(restaurant: Restaurant) {
    return this.http.post<Restaurant>(this.baseUrl + '/v1/restaurant', restaurant).pipe(catchError(err => { return of(null); }));
  }

  addRider(rider: Rider) {
    return this.http.post<Rider>(this.baseUrl + 'v1/rider', rider, this.httpOptions).pipe(catchError(err => { return of(null); }));   //return this.http.post<Rider>(baseUrl + '/v1/rider', rider).pipe(tap(message => console.log(message)), catchError(this.handleError('addRider', rider)));
  }

  addEmail(email: Email) {
    return this.http.post<Email>(this.baseUrl + '/v1/email', email, this.httpOptions).pipe(catchError(err => { return of(null); }));
  }
}

Это обработка компонента HTMLдействия формы и, как уже упоминалось ранее, я использовал реактивные формы, и вот фрагмент кода

   <!-- rider -->
            <form [formGroup]="riderForm" (ngSubmit)="onSubmitRider()" class="rider stratos pt-4 w-full pt-8 hidden" id="rider">
              <div class=" surname flex flex-col mb-4">
                <label for="rider_surname" class="text-gray-700 text-xs mb-1">Surname</label>
                <input formControlName="other_name" name="rider_surname" class="p-1 border bg-transparent w-full sm:p-2"
                  autocomplete="false" />
              </div>
              <div class="other-name flex flex-col mb-4">
                <label for="rider-othernames" class="text-gray-700 text-xs mb-1">Other Names</label>
                <input formControlName="first_name" name="rider_other_name" class="p-1 border bg-transparent w-full sm:p-2"
                  autocomplete="false" />
              </div>
              <div class="other-name flex flex-col mb-4">
                <label for="rider-mobile-number" class="text-gray-700 text-xs mb-1">Phone Number</label>
                <input formControlName="contact" name="rider_contact_number" class="p-1 border bg-transparent w-full sm:p-2"
                  autocomplete="false" />
              </div>
              <div class="other-name flex flex-col mb-4">
                <label for="" class="text-gray-700 text-xs mb-1">City of Location</label>
                <input formControlName="city" name="rider_city" class="p-1 border bg-transparent w-full sm:p-2" autocomplete="false" />
              </div>
              <button class="p-2 border bg-transparent w-full red text-white sm:p-4" >Submit</button>
            </form>