提交后重定向 angular 中的响应式表单

Question

我试图在用户在我的 angular 应用程序中提交表单后重定向到另一个页面（称为登陆），我在 reg-form.page.ts 文件中完成了以下代码：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms'
import { NavController, ModalController } from '@ionic/angular';
import { TermsComponent } from '../reg-form/terms/terms.component';
import { PrivacyComponent } from '../reg-form/privacy/privacy.component';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/router';

@Component({
selector: 'app-reg-form',
templateUrl: './reg-form.page.html',
styleUrls: ['./reg-form.page.scss'],
})
export class RegFormPage implements OnInit {
form: FormGroup;
router: any;

constructor(
private modalCtrl: ModalController,  private http: HttpClient, public fb: FormBuilder)  
{this.form = this.fb.group({
firstname: [''],
lastname: [''],
})}

ngOnInit() {
this.form = new FormGroup({
  firstname: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
  lastname: new FormControl(null, {
    updateOn: 'blur',
    validators: [Validators.required]
  }),
 }

onSubmitForm () {
var formData: any = new FormData();
formData.append("firstname", this.form.get('firstname').value);
formData.append("lastname", this.form.get('lastname').value);


this.http.post('https://mywebsite/.../,,,,/app-registrationForm.php', formData,   
{responseType: 'text'}).subscribe(
  (response) => console.log(response),
  (error) => console.log(error)
);

this.form.reset();
this.router.navigate(['/landing']);

并尝试使用底部的 router.navigate，但它无法导航到目标网页。我应该包括其他东西吗？非常感谢您的帮助

Answer 1

如果想在用户登录成功后才跳转到登陆页面，那么需要在response里面写路由逻辑：

另外router.navigate需要一组路由，所以拆分并发送路由。

this.http.post('https://mywebsite/.../,,,,/app-registrationForm.php', formData,   
{responseType: 'text'}).subscribe(
  (response) => { 
     console.log(response);
     this.router.navigate(['/', 'landing']);
  },
  (error) => console.log(error)
);

提交后重定向 angular 中的响应式表单

redirecting a reactive form in angular after submitting

router

angular

angular-reactive-forms