Angular 8 ngForm not performing action

Question

I am trying to use ngForm by following an online tutorial for building the full-stack application but save button isn't triggered, I am totally new to angular 8 I had followed each step kidly help me to get rid of this thanks in advance

My form code 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>

My adduser.Component.ts file

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

app.module.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 { }

I am following this link to build an application

Answer 1

1. user is an input, and you assign this.newUser = Object.assign({}, this.user); it to this.newUser in ngOnInit. It means the this.newUser get the original input value of user and won't get the new value when you use it in addUser() (you can check more about ngOnInit).
2. To get value from ngForm, you can pass the form like (click)="addUser(recievedUser)" then access its values by recievedUser.controls.[nameOfControl].[value] (ex: recievedUser.controls.name.value). You can use console.log(recievedUser.controls.name) to see it.

To fix your problem, you can:

1. Move this.newUser = Object.assign({}, this.user); into addUser() so it can get the latest value

   addUser() {

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

   }

Or 2. Keep this.newUser = Object.assign({}, this.user); in ngOnInit and change the binding from user to newUser ([(ngModel)]="newUser.name").

Answer 2

I don't see declared the ngSubmit Output of the directive ngForm. Try to put it in your form HTML tag.

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

Then remove the click button event

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

Try it.