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

Question

我需要你的帮助。我有一小段代码，我想用它把我的字段发送到后端。代码没有错误，我在数据库中获取了对象，但是在发送表单后，我得到以下错误：

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

我做错了什么，我的错误在哪里？非常感谢

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);
 }
}

模板

<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

问题在这里：

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

您正在将您的 FormGroup (usersFormGroup) 分配给您从 API 收到的响应（不是 FormGroup 类型）。如果您的响应与您传递给 API 的对象具有相同的属性，那么您应该将其更改为：

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

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

Answer 2

使用

this.usersFormGroup.patchValue

而不是

this.usersFormGroup.setValue

Answer 3

要设置所有 FormGroup 值，请使用 setValue:

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

要仅设置一些值，请使用 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 4

这一行你错了

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

usersFormGroup 是 FormGroup 实例，不是用户对象。因此，您需要使用 setValue 或 patchValue 为表单设置新值。我建议你应该使用 patchValue 因为当你不知道用户对象有足够的属性时，这是修改表单值的最好方法，它可以根据存在于该对象的键更新表单值表格

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

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

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

angular

angular-reactive-forms