发送请求后的消息输出

Question

请帮助我。我正在与一家发送一个字段以创建新密码的小公司合作。如果请求成功，我在浏览器中得到以下答案：network / fetch

能否举例说明如何显示回复消息？如果没有，如果请求成功，如何显示现成的消息？非常感谢

我的控制台

模板：

<div class="forgot_password_component">
   <form class="forgot_password_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 代码

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

Answer 1

您可以检查请求结果并从中提取消息，如下所示：

//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
  }
 })
}

并使用绑定在 .html

中显示消息

<div class="forgot_password_component">
   <form class="forgot_password_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>

发送请求后的消息输出

Output of the message after sending the request

forms

angular