Bind data-error to component property

Topic: Bind data-error to component property

alesg free asked 5 years ago

I' d like to bind data-error attribute to component property (in my case defErrorMsg). My goal is to provide translation to error messages.

So I'd like to do something like that, but the application display generic error "wrong".

<input
              mdbInputDirective
              type="number"
              id="id_vd"
              class="form-control"
              formControlName="id_vd"
              [validateSuccess]="false"
              [attr.data-error]="defErrorMsg"
            />

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear alesg,</p>

<p>The mdbInputDirective and it's validation is marked as deprecated.</p>

<p>Please try to use our rewritten, faster <a href="https://mdbootstrap.com/docs/angular/forms/validation/">mdbValidate</a> directive.</p>

<p>Here's the example code which will works for you fine:</p>

<pre class="prettyprint"><code><form [formGroup]="validatingForm">
      <div class="md-form">
        <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="required">
        <label for="form1">Required validator</label>
        <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">{{errorMessage}}</mdb-error>
        <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">{{successMessage}}</mdb-success>
      </div>
    </form>
</code></pre>

<pre class="prettyprint"><code>validatingForm: FormGroup;
  errorMessage = 'Error message';
  successMessage = 'Success message';
  ngOnInit() {
    this.validatingForm = new FormGroup({
      required: new FormControl(null, Validators.required)
    });
  }

get input() { return this.validatingForm.get('required'); }
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

Dear alesg,

The mdbInputDirective and it's validation is marked as deprecated.

Please try to use our rewritten, faster mdbValidate directive.

Here's the example code which will works for you fine:

.html:

<form [formGroup]="validatingForm">
      <div class="md-form">
        <input mdbInput mdbValidate type="text" id="form1" class="form-control" formControlName="required">
        <label for="form1">Required validator</label>
        <mdb-error *ngIf="input.invalid && (input.dirty || input.touched)">{{errorMessage}}</mdb-error>
        <mdb-success *ngIf="input.valid && (input.dirty || input.touched)">{{successMessage}}</mdb-success>
      </div>
    </form>

.ts:

validatingForm: FormGroup;
  errorMessage = 'Error message';
  successMessage = 'Success message';
  ngOnInit() {
    this.validatingForm = new FormGroup({
      required: new FormControl(null, Validators.required)
    });
  }

  get input() { return this.validatingForm.get('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

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.0.0
Device: PC
Browser: Crome
OS: WIN10
Provided sample code: No
Provided link: No

alesg

32Support score
3Questions 1Answers 0Snippets