MDBootstrap Angular PRO Multiple License

Topic: MDBootstrap Angular PRO Multiple License

shibnath96 free asked 6 years ago

Hi,

I am using MDBootstrap Angular v6. I have an issue regarding form validation. I just want know what is the way to apply more than one validation rules over one input field. In your documentation, there you have not written about this. Please review the following code.

template.html :

<form [formGroup]="candidateDetailsForm">

      <div class="md-form form-container">

          <input mdbInputDirective type="text" id="name" name="name" class="form-control"

          formControlName="name" [errorMessage]="'Name is required.'" [validateSuccess]="false"

          >

          <label for="form1" class="">Enter Your Name</label>

      </div>
</form>

component.ts :

{
     this.email = new FormControl('', [ Validators.required, Validator.email ]);
}

Thank you and I look forward to your kind response.

Regards,

Shibnath Salui

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Shibnath Salui,

Please check my code. The checkError() method checks which error got name input, and returns proper error message to the [errorMessage] input.

HTML:
<div>
<pre><form [FormGroup]="candidateDetailsForm">

<label for="form1"class="">Enter Your Name</label>

</div>

</form></pre>
</div>
TS:
<div>
<pre>import { Component } from '@angular/core';

import { FormGroup, Validators, FormControl } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

candidateDetailsForm:FormGroup;

name:FormControl;

constructor() {

this.name=newFormControl('', Validators.compose([Validators.required, Validators.email]));

}

checkError() {

if (this.name.getError('email')) {

return'Email is not valid';

} else if (this.name.getError('required')) {

return'Input is required';

}

}</pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

Dear Shibnath Salui, Please check my code. The checkError() method checks which error got name input, and returns proper error message to the [errorMessage] input. HTML:

<form [FormGroup]="candidateDetailsForm">

<div class="md-form form-container">

<input mdbInputDirective type="text" id="name" name="name" class="form-control" [formControl]="name" [errorMessage]="checkError()">

<label for="form1"class="">Enter Your Name</label>

</div>

</form>

TS:

import { Component } from '@angular/core';

import { FormGroup, Validators, FormControl } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

candidateDetailsForm:FormGroup;

name:FormControl;

constructor() {

this.name=newFormControl('', Validators.compose([Validators.required, Validators.email]));

}

checkError() {

if (this.name.getError('email')) {

return'Email is not valid';

} else if (this.name.getError('required')) {

return'Input is required';

}

}

}

Best Regards, Damian

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: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

shibnath96

0Support score
1Questions 0Answers 0Snippets