How to show success or failure message in angular?-CodePudding

user.component.html

<form #ff="ngForm">
    <input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
    <input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
    <input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
    <input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
    <input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../service/user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private us:UserService) { }

  user:  any;
  selectedUser:  any  = {fname:null, age:  null, sex: null};

  ngOnInit(): void {
  }

  createUserData(ff){
    this.us.createform(ff).subscribe((user:any)=>{
      console.log("Success register");
    });
  }
}

I am new in angular and I am trying to insert form data in database using web API to mysqli which is working fine. Now, I want to show success or failure message in my user.component.html page. I want when I click on submit button the page reload and show success or failure message. So, How can I do this please help me.

Thank you

CodePudding user response：

You don't need to reload the page. You can choose to navigate to another component/page, or you can show a Popup dialog or you could render ad different content. here a very simple example in order to render a different content:

 registerSucess:boolean = false;

 createUserData(ff){
    this.us.createform(ff).subscribe((user:any)=>{
      console.log("Success register");
      this.registerSucess=true;
    });
  }

and in the tempalte:

<form #ff="ngForm" *ngIf="!registerSucess">
    <input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
    <input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
    <input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
    <input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
    <input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>

<h1 *ngIf="registerSucess"> Register Success :D </h1>

or you could use the variavle userinstead of registerSuccess, might be simpler

CodePudding user response：

Create a string variable in user.component.ts to hold the message

export class UserComponent implements OnInit {
    message = '';
...

Add an element to the html to contain the message, I'll use a <p>. Double curly brackets {{ }} allow you to insert a variable from the component.

<p>{{message}}</p>

Now simply updating the message in the component will update the html

  createUserData(ff){
    this.message = "Creating User Data..."
    this.us.createform(ff).subscribe((user:any)=>{
      this.message = "Success!"
    });
  }

CodePudding user response：

In your code:

this.us.createform(ff).subscribe((user:any) => {
   console.log("Success Register")
});

The code in the 'subscribe' delta function is executed every time a response is received through the 'createform' function. So here you can input some sort of mechanism to trigger you popup.

You need a popup window to be shown, which comes down to what sort of UI components you are using. The popup can be written in your html, and only shown through a flag that you activate in the subscribe delta function, and then disable when pressing or closing the popup.

I'd recommend using something like bootstrap for UI components.