2017-06-01 5 views
1

私はAngularアプリケーションを作成していますが、視覚的に問題があります。 私はそれにReactiveFormを持つ1つのページを持っていますが、私がページを訪れるたびに、URLは前のURLに戻って変更されます(ページはうまく表示されます)。URLが前のURLにリセットされます

これは最初のページです: First page

それから私は、レジスタページを参照してください。enter image description here

私もURLの変更を参照してくださいませんが、それはすぐに戻って変更します。

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:@borislemkeする

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(); 
} 
} 
+0

コンソールにエラーが表示されますか? – borislemke

+0

ああ、それはいくつかのエラーがあったとapperently理由があった... –

答えて

0

おかげで、私は私のページには、多少の誤差があったことが判明し、それが変更理由です何らかの理由でURL(私はこれがバグだとは確信しています)。

関連する問題