Angular2 - Nemožno čítať vlastnosť 'value' nedefinovanej po navigácii na prihlasovaciu stránku - uhlové

Používam Angular 2 a volám APIdostať späť nejaké JSON. Hovor funguje a dostanem odpoveď. Po prejdení na prihlasovaciu stránku (keď sa obnoví token) a po kliknutí na tlačidlo Odoslať získate:

Nedá sa prečítať vlastnosť „value“ of undefined

po opätovnom načítaní stránky funguje dobre !.

Login.component.ts

 import { Component, OnInit } from "@angular/core";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {AuthService} from "../../services/auth.service";
import {HttpErrorResponse} from "@angular/common/http";
import {Router} from "@angular/router";

@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.css"]
})
export class LoginComponent implements OnInit {

f: FormGroup;
errorCredentials = false;

constructor(private formBuilder: FormBuilder, private authService: AuthService,
private router: Router) { }

ngOnInit() {
this.f = this.formBuilder.group({
email: [null, [Validators.required, Validators.email]],
password:[null, [Validators.required]]
});
}

onSubmit(){

this.authService.login(this.f.value).subscribe(
(res) => {this.router.navigate(["admin"]);},
(errorResponse: HttpErrorResponse) => {
// console.log(errorResponse);
if (errorResponse.status == 401) {
this.errorCredentials = true;
}
}
);
}

Login.component.html

<div class="container app-login">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<h1 class="text-center">
<b>Angular</b> Laravel
<br/>
<small>Amr Ahmed</small>
</h1>
<br/>
<div class="alert alert-danger alert-dismissible" role="alert" *ngIf="errorCredentials">
Email or password Invalid
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form [formGroup]="f" novalidate>
<div class="form-group has-feedback" [ngClass]="{"has-success": f.controls["email"].valid,
"has-error": f.controls["email"].invalid && (f.controls["email"].touched || f.controls["email"].dirty)}">
<input type="email" formControlName="email" class="form-control" id="InputEmail" placeholder="Email">
<span *ngIf="f.controls["email"].valid" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span *ngIf="f.controls["email"].invalid && (f.controls["email"].touched || f.controls["email"].dirty)">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span class="text-danger">E-mail Invalid.</span>
</span>
</div>
<div class="form-group" [ngClass]="{"has-success": f.controls["password"].valid,
"has-error": f.controls["password"].invalid && (f.controls["password"].touched || f.controls["password"].dirty)}">
<input type="password" formControlName="password" class="form-control" id="InputPassword" placeholder="Password">
<span class="text-danger" *ngIf="f.controls["password"].invalid && (f.controls["password"].touched || f.controls["password"].dirty)">Password Invalid</span>
</div>
<button type="submit" class="btn btn-default" [disabled]="f.invalid" (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>

funkcie prejsť na prihlasovaciu stránku

goToLogin(): void{

const router = this.injector.get(Router);
localStorage.clear();
router.navigate(["auth/login"]);
}

odpovede:

Skúste to, funguje to pre mňa

export class LoginComponent implements OnInit {

f: FormGroup;
email: FormControl;
password: FormControl;
errorCredentials = false;

ngOnInit() {
this.email = new FormControl("", Validators.required);
this.password = new FormControl("", Validators.required);

this.f = new FormGroup({
email: this.email,
password: this.password
});
}