發送請求后的訊息輸出

請幫我。我正在與一家發送一個欄位以創建新密碼的小公司合作。如果請求成功，我會在瀏覽器中得到以下答案：network / fetch

請你給我看一個如何顯示回復訊息的例子？如果沒有，如果請求成功，如何顯示現成的訊息？非常感謝你

我的控制臺

模板：

<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代碼

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

uj5u.com熱心網友回復：

您可以檢查請求的結果并從中提取訊息，如下所示：

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

標籤：

上一篇：使用修改后的資料將資訊從elementor表單發送到另一個頁面

下一篇：Tomcat10(jakarta.servlet.*)上JSP(不是JSF)中的CDI