Sending Form error: TypeError: this.form.get is not a function

Question

I need your help. I have a small piece of code with which I want to send my fields to the backend. There are no errors in the code, I get the object in the database, but after sending the form, I get the following error:

TypeError: this.form.get is not a function.

What i am doing wrong, where is my mistake? Thank you very much

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
import {UserService} from "../services/user.service";

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

export class UsersTableComponent implements OnInit{

  usersFormGroup: FormGroup;

constructor(
private userService: UserService,
private formBuilder: FormBuilder) {}

ngOnInit() {
this.usersFormGroup = this.formBuilder.group({
  username: '',
  name: '',
  surname: '',
  email: '',
  password: '',
 })
}

saveUserToDataBase() {
   const newUser = this.usersFormGroup.value;
   this.userService.createUser(newUser).subscribe(value => this.usersFormGroup = value);
 }
}

Template

<form [formGroup]="usersFormGroup">
   <input type="text" formControlName="username">
   <input type="text" formControlName="name">
   <input type="text" formControlName="surname">
   <input type="email" formControlName="email">
   <input type="password" formControlName="password">
  <button (click)="saveUserToDataBase()">Створити</button>
</form>

Answer 1

you are wrong in this line

this.userService.createUser(newUser).subscribe(value => this.usersFormGroup = value);

usersFormGroup is a FormGroup instance, not a user object. So, you need to use setValue or patchValue to set the new value to the form. I suggest you should use patchValue because it is the best way to modify the form value when you don't know the user object has enough properties, it can update the form value based on the key of that object that existed in the form

this.userService.createUser(newUser).subscribe(value => this.usersFormGroup.patchValue(value));

Answer 2

To set all FormGroup values use setValue:

this.myFormGroup.setValue({
  formControlName1: myValue1, 
  formControlName2: myValue2
});

To set only some values, use patchValue:

this.myFormGroup.patchValue({
  formControlName1: myValue1, 
  // formControlName2: myValue2

*** The value from api must be as same value FormGroup
ex: {
  username: '',
  name: '',
  surname: '',
  email: '',
  password: '',
 })

Answer 3

The issue is here:

this.userService.createUser(newUser).subscribe(value => this.usersFormGroup = value);

You're assigning your FormGroup (usersFormGroup) to the response (which is not of type FormGroup) you are receiving from the API. If your response has the same properties as the object you passed to the API then you should change it to:

this.userService.createUser(newUser).subscribe(value => this.usersFormGroup.setValue(value));

https://angular.io/api/forms/FormGroup#setvalue

Answer 4

Use

this.usersFormGroup.patchValue

Instead of

this.usersFormGroup.setValue