Angular - 错误 TS2345：“NgForm”类型的参数不可分配给“Ussdthirdpartyapp”类型的参数

Question

I design an Application using Angular 7 as the frontend and Laravel 5.8 as the backendend. I tested every in the POSTMAN and it works perfectly. I got this error in my ussd-channel-create.component.ts

ERROR in src/app/components/ussd/ussd-channel-create/ussd-channel-create.component.ts(58,56): error TS2345: Argument of type 'NgForm' is not assignable to parameter of type 'Ussdthirdpartyapp'. Type 'NgForm' is missing the following properties from type 'Ussdthirdpartyapp': id, description, ussd_string, user_id, and 2 more.

Then I got this in my ussd-channel-create-component.ts

Laravel:

Model Class: UssdThirdpartyApp.php

    class UssdThirdpartyApp extends Model
{
protected $table = 'ussd_thirdparty_app';

protected $fillable = [
    'name' ,
    'description',
    'ussd_string',
    'call_back',
    'created_at',
    'updated_at',
    'deleted_at',
    'telco',
    'user_id'

];    

public function telco()
{
    return $this->belongsTo(Telco::class, 'telco', 'id');
}        

public function user() {
    return $this->belongsTo('App\User');
}     
}

UssdThirdpartyAppResource.php

    class UssdThirdpartyAppResource extends JsonResource
{
public function toArray($request)
{
    return [
        'id' => $this->id,
        'name' => $this->name,
        'description' => $this->description,
        'ussd_string' => $this->ussd_string,
        'call_back' => $this->call_back,
        'telco' => $this->telco,            
        'user' => $this->user,
        'deleted_at' => (string) $this->deleted_at,          
        'created_at' => (string) $this->created_at,
        'updated_at' => (string) $this->updated_at
      ];
 }
}

ApiController

    public function storeUssdthirdpartyApp(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required',
        'description' => 'required',
        'ussd_string' => 'required|string|ussd_string|max:255|unique:ussd_thirdparty_app',
        'call_back' => 'required',
        'telco' => 'required'
    ]);
    if ($validator->fails()) {
        return response()->json($validator->errors(), 422);
    }

    // Creating a record in a different way
    $createUssdthirdpartyapp = UssdThirdpartyApp::create([
        'user_id' => $request->user()->id,
        'name' => $request->name,
        'description' => $request->description,
        'ussd_string' => $request->ussd_string,
        'call_back' => $request->call_back,
        'telco' => $request->telco,
    ]);

    return new UssdThirdpartyAppResource($createUssdthirdpartyapp);         
 } 

api:route

Route::post('storeUssdthirdpartyapp', 'ApiController@storeUssdthirdpartyapp');

Angular

Below is my model in Angular

model: ussdthirdpartyapp.ts

import { User } from '../models/user';
import { Telco } from '../models/telco';
export class Ussdthirdpartyapp {

  id: number;
  name: string;
  description: string;
  ussd_string: string;
  user_id: number;
  call_back: string;
  telco: number;

  user?: User;
  telcoid?: Telco;

  constructor() {}

}

service.ts

    import { Ussdthirdpartyapp } from '../models/ussdthirdpartyapp';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { environment } from 'src/environments/environment.prod';
import { HttpErrorHandler, HandleError } from '../shared/_services/http-handle-error.service';

@Injectable({
providedIn: 'root'
})

export class UssdthirdpartyappService {

private readonly apiUrl = environment.apiUrl;
private ussdthirdpartyappUrl = this.apiUrl;
private handleError: HandleError;  

constructor(
private http: HttpClient,
httpErrorHandler: HttpErrorHandler ) {
  this.handleError = httpErrorHandler.createHandleError('UssdthirdpartyappService');
}

/** POST Ussdthirdpartyapp to Ussdthirdpartyapps endpoint */
addUssdthirdpartyapp (ussdthirdpartyapp: Ussdthirdpartyapp): Observable<Ussdthirdpartyapp> {
return this.http.post<Ussdthirdpartyapp>(this.ussdthirdpartyappUrl, ussdthirdpartyapp)
.pipe(
  catchError(this.handleError('addUssdthirdpartyapp' + '/storeUssdthirdpartyapp', ussdthirdpartyapp))
);
}
}

ussd-channel-create-component.ts

     import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { UssdthirdpartyappService } from '../../../services/ussdthirdpartyapp.service';
 import { Ussdthirdpartyapp } from '../../../models/ussdthirdpartyapp';
 import { filter } from 'rxjs/operators';
 import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
 import { NotificationService } from '../../../services/notification.service';
 import { FormControl, FormGroupDirective, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';

 @Component({
 selector: 'app-ussd-channel-create',
  templateUrl: './ussd-channel-create.component.html',
 styleUrls: ['./ussd-channel-create.component.scss']
 })
 export class UssdChannelCreateComponent implements OnInit {

channelForm: FormGroup;
name:string='';
description:string='';
ussd_string:string='';
call_back:string='';
telco:number=null;
user_id:number=null;
message = '';
isLoadingResults = false;  


constructor(
private router: Router,
private spinnerService: Ng4LoadingSpinnerService, 
private ussdthirdpartyappService: UssdthirdpartyappService,
private notificationService: NotificationService, 
private formBuilder: FormBuilder) { }  

ngOnInit() {

this.channelForm = this.formBuilder.group({
  'name' : [null, Validators.required],
  'description' : [null, Validators.required],
  'ussd_string' : [null, Validators.required],
  'call_back' : [null, Validators.required],
  'telco' : [null, Validators.required]
});
}

ngOnDestroy(): void {
document.body.className = '';
}

onFormSubmit(form:NgForm) {
this.spinnerService.show();
this.ussdthirdpartyappService.addUssdthirdpartyapp(form)
  .subscribe(res => {
      let id = res['id'];
      this.spinnerService.hide();
      this.notificationService.onSuccess('Successfully Added.')
      this.router.navigate(['/ussdchanneldetail', id]);
    }, (err) => {
      console.log(err);
      this.spinnerService.hide;
    });
 }  

}

The question is why am I getting this error in my component.ts and how do I resolve it.

Thanks

Answer 1

I think you need to just pass form value. Also since you already have the channelForm , you can simply access it's value using channelForm.value . So just pass that:

import { Component, OnInit } from '@angular/core';
...

@Component({...})
export class UssdChannelCreateComponent implements OnInit {

  channelForm: FormGroup;

  ...

  onFormSubmit(form: NgForm) {
    this.spinnerService.show();
    this.ussdthirdpartyappService.addUssdthirdpartyapp(this.channelForm.value)
      .subscribe(...);
  }

}

Answer 2

I had the same problem..

I resolved it changing

onFormSubmit(form: NgForm)

by

onFormSubmit(form: any)