What is the solution for resolving this Angular issue: Expected argument expression.ts(1135)?

While following a CRUD tutorial, I encountered an issue with the code. Even though I have verified that my code matches the tutorial's code, I am getting an error message saying "Argument expression expected. ts(1335)" in the submit method onSubmit(). I have added a comment on the exact line where the error occurs. Any help would be appreciated. Thanks in advance.

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {StudentsService} from '../students.service';
import { Router } from '@angular/router';
import { Students } from '../students';

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

export class AddComponent implements OnInit {

  constructor(private formBuilder: FormBuilder,
    private _studentService: StudentsService,
    private router: Router
    ) { 

  }
  addForm: FormGroup;

  ngOnInit() {

    this.addForm = this.formBuilder.group({

       fName: ['', Validators.required],
       lName: ['', [Validators.required, Validators.maxLength(9)]],
       email: ['', [Validators.required, Validators.maxLength(30)]]
    });
  }


  onSubmit() {
    //console.log(this.addForm.value);
    this._studentService.createStudent(this.addForm.value)
    .subscribe(data => {
      this.router.navigate(['view']);
    },
  } // The error is occurring on this line

  }

Answer №1

Give this a shot:

onSubmit() {

    this._studentService.addNewStudent(this.addForm.value)
    .subscribe(result => {
      this.router.navigate(['view']);
    });
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for React not memoizing this callback?

I am encountering an issue with my Next.js project where the _app.tsx file contains the following code: const Root = ({ Component, pageProps }) => { ... const handleHistoryChange = useCallback((url) => { console.log({ url }); }, []); u ...

What is the proper way to arrange dates within strings in Angular?

I'm currently facing an issue with sorting two strings. The strings in question are: "2022 | Dec (V2 2022)" "2022 | Jul (V1 2022)" Although I am attempting to sort them using localeCompare, it is not yielding the correct result. T ...

Creating an array of strings using data from a separate array of objects in JavaScript/TypeScript

I want to generate a new array of strings based on an existing array of objects, with each object belonging to the Employee class and having a firstName field: assignees: Array<Employee>; options: string[]; I attempted to achieve this using the fol ...

Is it possible to modify the background-image using Typescript within an Angular project?

I have been struggling to change the background image in my Angular project using Typescript. I attempted to make the change directly in my HTML file because I am unsure how to do it in the CSS. Here is the line of code in my HTML file: <div style="ba ...

Enhance Vue TypeScript components with custom component-level properties

In my vue2 project, I am utilizing vue-class-component along with vue-property-decorator. My goal is to implement component-level security validation for each component when it loads. I imagine implementing it with a signature like this: @Component @Secur ...

A step-by-step guide on injecting a model within the root app module of a Nest JS application

Hello, I encountered an error in my Nest app and here is a screenshot of the error: https://i.stack.imgur.com/zY1io.png Below is the code snippet for the AppModule: @Module({ imports: [AppModule,CrudModule,MongooseModule.forRoot("mongodb://localhost:2 ...

The AngularJS 2 TypeScript application has been permanently relocated

https://i.stack.imgur.com/I3RVr.png Every time I attempt to launch my application, it throws multiple errors: The first error message reads as follows: SyntaxError: class is a reserved identifier in the class thumbnail Here's the snippet of code ...

Exploring two main pages, each with tabs displaying two negative behaviors

I developed an app with an ion-footer at the bottom of each root page : <ion-footer> <ipa-footer-buttons></ipa-footer-buttons> </ion-footer> The <ipa-footer-button> component is structured as follows: html: <ion-toolb ...

Combining one item from an Array Class into a new array using Typescript

I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...

Firestore rules restrict access to the data, however the Angular project is still able to retrieve the collection - ERROR Error: Insufficient permissions or missing

I am currently working on an Angular project that is connected to a Firestore database. Within the database, there is a collection called users, and each document within this collection contains a nested collection named hugeCollection. I have updated the ...

Customize buttons in Material UI using the styled component API provided by MUI

I am intrigued by the Material UI Styled Component API, not to be confused with the styled-component library. However, I am facing difficulty in converting my simple button component into a linked button. Can anyone advise me on how to incorporate a react ...

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

Transforming JSON data into XML using Angular 7

It turns out the xml2js npm package I was using doesn't support converting JSON to XML, which is exactly what I need for my API that communicates with an application only accepting XML format. In my service file shipment.service.ts import { Injecta ...

Receiving intelligent suggestions for TypeScript interfaces declared within function parameters

Here is a simple example I put together: In this example, intellisense provides suggestions for the interface of the object named test in the foo function. It works perfectly and I love it! However, if you declare that interface somewhere else like this: ...

What is the reason for Jest attempting to resolve all components in my index.ts file?

Having a bit of trouble while using Jest (with Enzyme) to test my Typescript-React project due to an issue with an alias module. The module is being found correctly, but I believe the problem may lie in the structure of one of my files. In my jest.config ...

What steps should I take to resolve the issue where Angular project error states that the data path "/polyfills" must be a string?

I am struggling with deploying my Angular app to Firebase and/or running it successfully locally using NodeJS version 18. To access the package.json and source code, you can click on this link: https://github.com/anshumankmr/jovian-genai-hackathon/blob/mas ...

What is the proper way to define the type of an object when passing it as an argument to a function in React using TypeScript?

I'm struggling to figure out the appropriate type definition for an Object when passing it as an argument to a function in React Typescript. I tried setting the parameter type to "any" in the function, but I want to avoid using "any" whenever passing ...

Showcasing a roster of contacts within a user-friendly interface, with the opportunity for users to effortlessly include additional individuals

RESOLVED: Special thanks to @Gourav - I simply needed to modify my form data input as shown below: buildFormDynamic(item: Item): FormGroup { return this.fb.group({ data: [item && item.data], }); } UPDATE: While the form builder code seems corre ...

Is there a way to determine if a tuple is of infinite or finite length?

Is there a way to determine if a tuple is finite or infinite? I've been working on a solution, but it doesn't cover all cases: type IsFinite<T extends any[], Finite = true, Infinite = false> = T extends [] ? Finite : T extends (infer E ...

Different methods to prompt TypeScript to deduce the type

Consider the following code snippet: function Foo(num: number) { switch (num) { case 0: return { type: "Quz", str: 'string', } as const; case 1: return { type: "Bar", 1: 'value' } as const; default: thr ...