New Form validation doesn't work correctly

Hi,

I tried the new way of validation which you suggested on your website but there are a few problems. First of all the docs are pretty strange there is a lot of copy and paste e.g. you always reference input in the *ngIf although the formcontrolname is another.Secondly when i inspect your side you still use your old system which is a big questionmark.

But the real problems started when i tried it with a simple login form.

In my template I wrote(Edit: sorry I don't know what went wrong with the align of the template please just copy it into another editor):

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

<div class="md-form">

<input mdbInput mdbValidate type="text" id="form2" class="form-control" formControlName="email">

<label for="form2">E-Mail</label>
<mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">
<span *ngIf="email.errors.required">Email is required</span>
<span *ngIf="email.errors.email">This email address is not valid</span>
</mdb-error>

</div>

<div class="md-form">

<input mddbInput mdbValidate type="password" id="form1" class="form-control" formControlName="password">

<label for="form1">Passwort</label>
<mdb-error *ngIf="password.invalid && (password.dirty || password.touched)">
password is required
</mdb-error>
</div>

<div class="form-check" id="saveCredentials">

<input (click)="isChecked($event)" type="checkbox" class="form-check-input" id="materialChecked2">

<label class="form-check-label" for="materialChecked2">Anmeldedaten speichern</label>

</div>

<div class="text-center">

<button class="btn login-btn btn-round waves-light default-color" type="submit" mdbWavesEffect>Login</button>

</div>

</form>

In my Component i built the form:

this.loginForm = this

.fb

.group({

'email':[

'',

[Validators.required,Validators.email]

],

'password':[

'',

[Validators.required]

]

});

and my onSubmit looked like this:

onSubmit() {

if(this.loginForm.valid){

this.loginService.isProcessing=true;

this._loginSubscribtion=this

.loginService

.login(this.loginForm.get('email').value,this.loginForm.get('password').value)

.subscribe(result=>{

console.log('Hello');

console.log(this.router);

if(result===true){

console.log(this.router);

this

.router

.navigate(['home']);

}

});

}

}

But I got the error that email in email.invalid is null so my question what have I done wrong? I hope you can help me.

Best Regards 

Matthias