提交后以角度重定向反应形式

时间:2021-03-12 22:05:22

标签: angular angular-reactive-forms router

在用户在我的 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 但它没有导航到登录页面。我应该包括其他东西吗?非常感谢您的帮助

1 个答案:

答案 0 :(得分:0)

如果你想在用户成功登录后才将其重定向到登陆页面,那么你需要在响应中编写路由器逻辑:

同样,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)
);
相关问题