Angular 不执行动作的有角度的形状

我试图通过在线教程使用ngForm来构建完整的堆栈应用程序，但是保存按钮没有被触发，我对angular 8是全新的，我已经遵循了每一步，kidly帮助我提前摆脱这个感谢

我的表单代码adduer.component.html

<h1>Add User</h1>
<form #recievedUser="ngForm">

  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" placeholder="user name" [(ngModel)]="user.name" name="name">

  <label for="type">Type</label>
  <input type="text" class="form-control" id="type" placeholder="type name" [(ngModel)]="user.type" name="name">

  <label for="password">Password</label>
  <input type="password" class="form-control" id="password" placeholder="password" [(ngModel)]="user.password" name="password">

  <br>
  <button type="button" class="btn btn-success" (click)="addUser()">Save</button>
</form>

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { UsersComponent } from './admin/users/users.component';
import {HttpClientModule} from '@angular/common/http';
import { AdduserComponent } from './admin/users/adduser/adduser.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    UsersComponent,
    AdduserComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

我正在下面构建一个应用程序

我没有看到指令ngForm的ngSubmit输出。试着把它放在表单HTML标记中

<form #recievedUser="ngForm" (ngSubmit)="addUser()">

然后删除单击按钮事件

<button type="button" class="btn btn-success">Save</button>

保存

试试看

user

是一个输入，您分配

this.newUser=Object.assign（{}，this.user）ngOnInit

中，将其编码到

this.newUser

。这意味着

this.newUser

获取

user

的原始输入值，并且在

addUser（）

中使用时不会获取新值（您可以查看有关

ngOnInit

的更多信息）

要从ngForm中获取值，您可以传递如下表单：

（单击）=“addUser（receiveduser）”

，然后通过

receiveduser.controls.[nameOfControl].[value]

（例如：

receiveduser.controls.name.value

）访问其值。您可以使用

console.log（receiveduser.controls.name）

查看它

要解决您的问题，您可以：

Move

this.newUser=Object.assign（{}，this.user）

输入

addUser（）

，这样它就可以获得最新的值

addUser（）{

}

---

或2。保留

this.newUser=Object.assign（{}，this.user）user

更改为

newUser

（

[（ngModel）]=“newUser.name”

）。

尝试将按钮类型设置为“提交”

<button type="button" class="btn btn-success">Save</button>

 this.newUser = Object.assign({}, this.user);

 this.httpClientService.addUser(this.newUser).subscribe(

 (user) => {

   this.userAddedEvent.emit();

   this.router.navigate(['admin', 'users']);

 });