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

The button's status changes to disabled until I click outside the input field in Angular

I am currently facing an issue with a form (heat index calculator) that requires 2 inputs - a dropdown and a button. The button is disabled when there are no inputs or if the inputs are invalid. Everything works correctly, except for the fact that even whe ...

Do we still need to configure XSRF-TOKEN on the server even when using HttpClientXsrfModule?

Would implementing the code below in app.module be sufficient to protect against XSRF/CSRF on the client side? HttpClientXsrfModule.withOptions({ cookieName: 'XSRF-TOKEN', headerName: 'X-XSRF-TOKEN' }) Alternatively, is additional ...

Angular fails to display newly created objects unless the page is manually refreshed

Hey there, I'm facing a problem with my message service on the user profile page. Even though messages are fetched from the database and displayed correctly, any changes (such as creating or deleting a message) are not reflected until I manually refre ...

Creating a class and initializing it, then implementing it in other classes within an Angular application

Trying to grasp some angular fundamentals by creating a class structure. Unsure if this is the right approach. export class Cars{ Items:Car[]=[]; constructor() { this.Items = [ { id: "1", name: "Honda" ...

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Is there a way to remove an index from a one-to-one relationship in TypeORM? @OneToOne(() => Customer, { cascade: true }) @JoinColumn({ name: 'customer', referencedColumnName: 'uid' }) customer: Customer I searched the d ...

Enhancing the level of abstraction in selectors within Redux using TypeScript

Here is a custom implementation of using Redux with TypeScript and the connect method. import { connect, ConnectedProps } from 'react-redux' interface RootState { isOn: boolean } const mapState = (state: RootState) =&g ...

The standard package does not contain a definition for "fetch"

When working on my node.js project in VSCode, I decided to use the standar package for formatting. $ npm i standard --save-dev One of the features of my code involves making a simple HTTP Request to an endpoint: fetch('http://example.com/movies.json& ...

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

The data type of the element is implicitly set to 'any' due to the fact that a 'string' expression cannot be used to reference the type '(controlName: string) => boolean'

checkError(typeofValidator: string, controlName: string): boolean { return this.CustomerModel.formCustomerGroup.contains[controlName].hasError(typeofValidator); } I am currently learning Angular. I came across the same code in a course video, but it i ...

Using System.import in my code is triggering a cascade of errors in my console

I incorporate the System module in my component. export class LoginComponent { constructor() { System.import('app/login/login.js'); } } The file loads successfully, however, TypeScript compiler raises an error Error:(10, 9) TS2 ...

Issue concerning the Bootstrap version, transitioning from Bootstrap 3 to Bootstrap 4

Upon initially installing bootstrap version "bootstrap": "^3.3.7",, everything was functioning properly, except for the inability to utilize a card component. For example: <div class="card" style="width: 18rem;"> <img class="card-img-top" src= ...

The improper utilization or replacement of Jest mock in an Angular standalone component's unit test is causing issues

Presented here is a streamlined Ionic/Angular component with unnecessary code removed. import { IonicModule, ModalController } from '@ionic/angular'; @Component({ selector: 'my-component', templateUrl: 'my-component.html' ...

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

What are the top techniques for designing with Angular 2 Material Design?

As a newcomer to angular 2 material design, I have noticed the primary, accent, and warn classes that apply specific colors to elements. Are these the only styling options available in Angular Material 2? Are there other classes that can be utilized for cu ...

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

Difficulty loading images in Angular 2 after deploying the dist folder (renamed to "myapp") to the tomcat webapp directory

When I pass the relative path and use the command below to build, I encounter a problem! ng build --prod --aot --base-href /myapp/ The issue arises with a 404 Resource not found error. bkgraph.jpeg:1 GET http://localhost:8081/assets/bkgraph.jpeg 404 () ...

Is it feasible to differentiate generic argument as void in Typescript?

One of the functions in my code has a generic type argument. In certain cases, when the context is void, I need to input 0 arguments; otherwise, I need to input 1 argument. If I define the function argument as context: Context | void, I can still add voi ...

Is TypeScript's `readonly` feature a complete replacement for Immutable.js?

Having experience with various projects utilizing React.js, I have worked with Flux, Redux, and plain React apps using Context. Personally, I appreciate the functional patterns used in Redux but find that unintentional state mutation can be a common issue ...

Retrieving the value of a checkbox when clicked in Angular 2

I am trying to use ngModel binding to check the status of a checkbox. After calling console.log(activeCheckbox);, I can see that the ngmodel and its value property are set to true in the console. However, when I immediately call console.log(activeCheck ...

Chrome Devtool reported an error, but the majority of them are in a null file

Currently grappling with an irksome problem in Vue.js. No matter how hard I try, I just can't seem to pinpoint the error. Even when setting a debugger, all it shows is an empty file. Please take a look at the image provided. Any assistance on identify ...