Question

我正在创建一个Angular应用程序，但我有一些视觉问题。我有一个页面上有一个ReactiveForm，但每当我访问该页面时，网址都会更改回上一个网址（页面显示正常）。

这是第一页：

然后我访问注册页面：

我确实看到网址发生了变化，但它会立即改变回来。

app.module.ts：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
import {RouterModule, Routes} from "@angular/router";
import {InfiniteScrollModule} from "ngx-infinite-scroll";
import {ReactiveFormsModule} from "@angular/forms";

import {AppComponent} from './app.component';
import {NavComponent} from './nav/nav.component';
import {InformationComponent} from "./information/information.component";
import {PlacesComponent} from "./places/places.component";
import {LoginComponent} from './login/login.component';
import {NewsComponent} from './news/news.component';
import {NewsService} from "./news.service";
import {CreateNewsComponent} from './create-news/create-news.component';
import {RegisterFormComponent} from './register-form/register-form.component';

const appRoutes: Routes = [
  {
    path: '',
    component: InformationComponent
  },
  {
    path: 'plaatsen',
    component: PlacesComponent
  },
  {
    path: 'inloggen',
    component: LoginComponent
  }, {
    path: 'nieuws',
    component: NewsComponent
  }, {
    path: 'create-news',
    component: CreateNewsComponent
  }, {
    path: 'registreren',
    component: RegisterFormComponent
  }
];

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    InformationComponent,
    PlacesComponent,
    LoginComponent,
    NewsComponent,
    CreateNewsComponent,
    RegisterFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    InfiniteScrollModule
  ],
  providers: [
    NewsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

寄存器form.component.ts：

import {Component, OnInit} from '@angular/core';
import {User} from '../_models/user';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html'
})

export class RegisterFormComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.buildForm();
  }

  user = new User(0, '', '', '', '', '');
  submitted = false;


  onSubmit() {
    this.submitted = true;
    this.user = this.registerForm.value;
  }

  onValueChanged(data?: any) {
    if (!this.registerForm) return;
    const form = this.registerForm;

    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
          break; //To only show first error
        }
      }
    }
  }

  formErrors = {
    'email': '',
    'password': '',
    'password2': ''
  };

  validationMessages = {


  'email': {
'required': 'Email is required.',
  'email': 'This is not a valid e-mail address.'
}, 'password': {
  'required': 'Password can\'t be empty.',
  'minlength': 'Password must be at least 8 characters.'
}, 'password2': {
  'equal': 'Password\'s must be equal.'
}
  };

buildForm(): void {
this.registerForm = this.fb.group({
  'email': [this.user.email, [
    Validators.required,
    Validators.email
  ]],
  'password': [this.user.password, [
    Validators.required,
    Validators.minLength(8)
  ]],
  'password2': [this.user.password2]
});

this.registerForm.valueChanges.subscribe(data => this.onValueChanged(data));

this.onValueChanged();
}
}

Answer 1

感谢@borislemke我发现我的页面有一些错误，这就是为什么它因某种原因改变了网址（我很确定这是一个bug）。

网址被重置为之前的网址

1 个答案: