Angular 8 ngForm未执行操作

Question

我正试图通过遵循构建全栈应用程序的在线教程来使用ngForm，但保存按钮没有触发，我对angular 8完全陌生

我的表单代码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>

我的adduser。Component.ts文件

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { User } from '../../../model/User';
import { HttpClientService } from '../../../service/http-client.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-adduser',
templateUrl: './adduser.component.html',
styleUrls: ['./adduser.component.css']
})
export class AdduserComponent implements OnInit {
@Input()
user: User
@Output()
userAddedEvent = new EventEmitter();
newUser: User;
message: string;
password: string;
constructor(private httpClientService: HttpClientService,
private router: Router) { }
ngOnInit() {
this.newUser = Object.assign({}, this.user);
}
addUser() {
this.httpClientService.addUser(this.newUser).subscribe(
(user) => {
this.userAddedEvent.emit();
this.router.navigate(['admin', 'users']);
}
);
}
}

应用程序模块.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 { }

我正在按照这个链接建立一个应用程序

Answer 1

我没有看到指令ngForm的ngSubmit Output被声明。试着把它放在你的表单HTML标记中。

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

然后删除点击按钮事件

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

试试看。

Answer 2

1. user是一个输入，您将this.newUser = Object.assign({}, this.user);分配给ngOnInit中的this.newUser。这意味着this.newUser获得了user的原始输入值，当您在addUser()中使用它时不会获得新值(您可以查看更多关于ngOnInit的信息(
2. 要从ngForm获取值，可以像(click)="addUser(recievedUser)"一样传递表单，然后通过recievedUser.controls.[nameOfControl].[value](例如：recievedUser.controls.name.value(访问其值。您可以使用console.log(recievedUser.controls.name)来查看它

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

1. 将this.newUser = Object.assign({}, this.user);移动到addUser()中，以便获得最新值

   addUser() {

   this.newUser = Object.assign({}, this.user);
   this.httpClientService.addUser(this.newUser).subscribe(
   (user) => {
   this.userAddedEvent.emit();
   this.router.navigate(['admin', 'users']);
   });
   

   }

或2。将this.newUser = Object.assign({}, this.user);保留在ngOnInit中，并将结合从user更改为newUser([(ngModel)]="newUser.name"(。