Output of the message after sending the request-CodePudding

Please help me. I'm working with a small firm that sends one field to create a new password. If the request is successful, I get the following answer in the browser: network / fetch

Please can you show me an example of how to display a reply message? And if not, how to show a ready-made message if the request is successful? thank you very much

my console

template:

<div >
   <form  [formGroup]="forgotPasswordForm">
    <mat-form-field appearance="outline">
  <mat-label>Type email</mat-label>
  <input matInput formControlName="email">
  <mat-error *ngIf="forgotPasswordForm.controls['email'].errors?.required">Field can't be empty</mat-error>
  <mat-error *ngIf="forgotPasswordForm.controls['email'].errors?.email">Invalid email</mat-error>
    </mat-form-field>
   <button mat-raised-button color="accent" [disabled]="forgotPasswordForm.invalid" (click)="sendEmailToRestorePassword()">Restore</button>
   //Message from browser
   <span></span>
   //Ready message
   <span>A new password has been sent to the specified mail</span>
 </form>
</div>

ts code

export class ForgotPasswordComponent implements OnInit {

forgotPasswordForm: FormGroup;
subscription: Subscription;
isLoading = false;

constructor(private formBuilder: FormBuilder, private router: Router, private authService: AuthService) { }

ngOnInit(): void {
this.forgotPasswordForm = this.formBuilder.group({
  email: ['', [Validators.required, Validators.email]] })
}

email() {
   return this.forgotPasswordForm.get('email')
}

sendEmailToRestorePassword() {
this.subscription = this.authService.forgotPassword(this.forgotPasswordForm.value).subscribe((done) => {
  this.isLoading = false;
  this.router.navigate(['auth', 'login'])
 })
}

CodePudding user response：

You can check the result of the request and extract the message from it as follows:

//response interface
export interface Response {
  detail: string;
}

export class ForgotPasswordComponent implements OnInit {

forgotPasswordForm: FormGroup;
subscription: Subscription;
isLoading = false;
message: string;

constructor(private formBuilder: FormBuilder, private router: Router, private authService: AuthService) { }

ngOnInit(): void {
this.forgotPasswordForm = this.formBuilder.group({
  email: ['', [Validators.required, Validators.email]] })
}

email() {
   return this.forgotPasswordForm.get('email')
}

sendEmailToRestorePassword() {
this.subscription = this.authService.forgotPassword(this.forgotPasswordForm.value).subscribe((done: Response) => {
  if (done['detail'] != null){
     this.message = done['detail'];
     this.isLoading = false;
     //add your delay
     this.router.navigate(['auth', 'login'])
   }
  else{
    this.message = "fail"; //or any error message you want
  }
 })
}

And use binding to show the message in .html

<div >
   <form  [formGroup]="forgotPasswordForm">
    <mat-form-field appearance="outline">
  <mat-label>Type email</mat-label>
  <input matInput formControlName="email">
  <mat-error *ngIf="forgotPasswordForm.controls['email'].errors?.required">Field can't be empty</mat-error>
  <mat-error *ngIf="forgotPasswordForm.controls['email'].errors?.email">Invalid email</mat-error>
    </mat-form-field>
   <button mat-raised-button color="accent" [disabled]="forgotPasswordForm.invalid" (click)="sendEmailToRestorePassword()">Restore</button>
   <span>{{message}}</span>
 </form>
</div>