Topic: New Form validation doesn't work correctly

bfk.portal pro asked 5 years ago


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


Arkadiusz Idzikowski staff answered 5 years ago


Hello,

You need to add getters in your ts file. For example:

get email() { return this.loginForm.get('email'); }

get password() { return this.loginForm.get('password'); }
 
Regards,
Arek


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No