Type issue with ViewChild in Angular

The error showing to me is:

Type 'TeamIn | null | undefined' is not assignable to type 'TeamIn | null'. Type 'undefined' is not assignable to type 'TeamIn | null'.
​

so My code goes like this: I'm getting data from child to parent using the Viewchild like this:

this is in Parent component: @ViewChild(TeamInfoFormComponent) TeamForm?: TeamInfoFormComponent

also once user clicks on a function in parent component I'm getting the data using a function in the child like this:

SubmitTeamFn(){
const teamFormData: TeamIn | null = this.TeamForm?.getTeamForm()
this.TeamService.PostTeamData(teamFormData).subscribe()}


And I use that data to send it using my service that goes like this:

teamService:

PostTeamData(team:TeamIn | null) : Observable<any> {
return this.http.post<TeamIn>("http://localhost:3000/teams", team)
}


last thing the function inside the child goes like this:

getTeamForm():TeamIn | null {
const team = this.teamForm.valid ? this.teamForm.value : null
return team
}


teamIn interface:

export interface TeamIn {
team_name:string;
team_contactNum:number;
team_category:string;
}


I don't know what I'm doing with type I'd like to hear a solution also some guidance about using types thank you in advance

Continue reading...