New Form validation doesn't work correctly

Topic: New Form validation doesn't work correctly

bfk.portal pro asked 6 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

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

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.

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

Add comment

Write

Create snippet

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

bfk.portal

Pro User 15Support score
4Questions 0Answers 0Snippets