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

 


Damian Gemza staff answered 6 years ago


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

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