How do I retrieve the value of a dxi-item in TypeScript with Angular and Devextreme?

One of the challenges I am facing is related to a Data Grid that has editing capabilities in popup mode. Within this grid, there are two data fields - password and confirm password - which I would like to validate to ensure they match. However, I am struggling to access the value of the password field for comparison.

Here is a snippet of my HTML:


  <dx-data-grid
    ..........
  >

  <dxo-editing
      mode="popup"
      [allowUpdating]="true"
      [allowAdding]="true"
      [allowDeleting]="true"
    >
      <dxo-popup
      ..........
      >
      </dxo-popup>

      <dxo-form>
      .......

      <!-- Password -->
          <dxi-item
            dataField="Password"
            editorType="dxTextBox"
            [editorOptions]="{
              stylingMode: 'outlined',
              mode: 'password',
              placeholder: 'Password'
            }"
          >
            <dxi-validation-rule
              type="required"
            ></dxi-validation-rule>
          </dxi-item>

          <!-- Confirm Password -->
          <dxi-item
            dataField="ConfirmPassword"
            editorType="dxTextBox"
            [editorOptions]="{
              stylingMode: 'outlined',
              mode: 'password',
              placeholder: 'Confirm Password'
            }"
          >
            <dxi-validation-rule
              type="required"
            ></dxi-validation-rule>
            <dxi-validation-rule
              type="compare"
              [comparisonTarget]="passwordComparison"
              message="Password and Confirm Password do not match"
            >
            </dxi-validation-rule>
          </dxi-item>


When it comes to Typescript, here's what I have attempted:

  passwordComparison = () => '';

The main issue lies in how I can retrieve the value of the Password Datafield for comparison. I've experimented with various approaches, such as adding formData to the dxo-form or using #pass within the Password dxi-item's dataField and accessing the value through view child. Unfortunately, I have not been successful in retrieving any values so far. It's possible that I may not have implemented these methods correctly.

Answer №1

I suggest utilizing the rowIndex to retrieve the row data within the comparisonTarget function. The current index of the rowIndex can be accessed during the onEditorPrepared event.

For example:

HTML:

<dx-data-grid
    [dataSource]="dataSource"
    (onEditorPrepared)="onEditorPrepared($event)">

    <dxo-editing
        mode="popup"
        [allowUpdating]="true"
        [allowAdding]="true"
        [allowDeleting]="true">

        <dxo-popup>
        </dxo-popup>

        <dxo-form>
            <dxi-item dataField="Password"></dxi-item>
            <dxi-item dataField="ConfirmPassword"></dxi-item>
        </dxo-form>

    </dxo-editing>

    <dxi-column dataField="Password">
        <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="ConfirmPassword">
        <dxi-validation-rule type="required"></dxi-validation-rule>
        <dxi-validation-rule
            type="compare"
            [comparisonTarget]="passwordComparison"
            message="Passwords do not match">
        </dxi-validation-rule>
    </dxi-column>
</dx-data-grid>

TS:

class MyComponent {

    @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;

    currentRow: number;

    constructor() {
        this.onEditorPrepared = this.onEditorPrepared.bind(this);
        this.passwordComparison = this.passwordComparison.bind(this);
    }

    onEditorPrepared(e) {
        if (e.parentType == "dataRow") {
            this.currentRow = e.row.rowIndex;
        }
    }

    passwordComparison() {
        return this.grid.instance.cellValue(this.currentRow, 'Password');
    }
}

The documentation for the cellValue method can be found here.

Information about the onEditorPrepared event is available here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The image hover feature is not functioning as expected in Angular 4

Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...

I am not currently working on developing an angular application

Seeking assistance for the issue described below, as I have been struggling with it for three days. Any help would be greatly appreciated. Despite multiple attempts, the situation only seems to worsen with each try. The problem arises when attempting to ...

What is the best way to define an event binding statement in the Angular code rather than within the template?

Is it possible to define the event binding statement directly in the code (rather than in the template)? I am trying to dynamically create a menu, and while I can achieve this with routes (since they are strings), using event names seems to be more challe ...

Encountering issues with utilizing global variables in Ionic 3

Using Ionic 3, I created a class for global variables but encountered an error Uncaught (in promise): Error: No provider for Globals! Error: No provider for Globals! at injectionError (http://localhost:8100/build/vendor.js:1590:86) at noProviderError Th ...

Leveraging getStaticProps in Next.js

I am currently embarking on my inaugural Nextjs project, focused on developing a basic blog utilizing the JSON placeholder API. Strangely, I am encountering an issue where the prop "posts" is being perceived as undefined. Can anyone provide assistance with ...

Error message in Angular about undefined JavaScript function

Struggling to make my Angular 17 project functional with Bootstrap (5) and the datePicker feature. Despite following tutorials, I keep encountering a "ReferenceError: datePicker is not defined" error during the app build process. Here are the steps I&apos ...

Only implement valueChanges on the second step of the form

I am utilizing the mat-stepper with a single form. My stepper has two steps only. I am looking to make an API request for every input value change, but only when the user is on the second step. How can I accomplish this? .ts ngOnInit() { this.formGr ...

Issue encountered while installing npm dependencies: JSON input terminated unexpectedly in the vicinity of '...ories":{},"dist":{"in'

Encountering an issue with running npm install. The debug.log is showing the following logs: 2644 silly saveTree +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55223037333a3b21393a3431302715647b637b">[email protect ...

When exporting data to Excel, the date is automatically adjusting based on the timezone. Is there a way to prevent this from happening

Whenever I attempt to export data to excel in angular, I encounter an issue with time zones. The date in the database is set in timezone 'x', while I am exporting data from timezone 'y'. As a result, the exported data in Excel displays ...

What is the best way to assign unique IDs to automatically generated buttons in Angular?

Displayed below is a snippet of source code from an IONIC page dedicated to shapes and their information. Each shape on the page has two buttons associated with it: shape-properties-button and material-information-button. Is it possible to assign different ...

Is it possible to set the initial value of useState() as null and later assign it an object value?

https://i.sstatic.net/TjAbz.png Looking at the image, I am attempting to set up a React state hook for the alert system on my website. Initially, I want no alerts to be displayed. However, when a user clicks a button, I want to show a success alert with a ...

Angular 4: Exploring the Contrasts between ngDoCheck and ngAfterViewChecked

Within the context of Angular 2+, it appears that both ngDoCheck and ngAfterViewChecked have a similar purpose. It is noted that ngDoCheck is invoked whenever change detection is activated, which occurs upon a change in the View. According to the documenta ...

Showing the Nested Object following retrieval from the API

Greetings everyone, I am facing an issue with displaying basic data from an API service that contains a NESTED json object. The challenge I am encountering is that most tutorials only focus on displaying data from array objects, not nested ones. The str ...

Several mat-radio-button options chosen within mat-radio-group

`<mat-radio-group [ngClass]="cssForGroup" name="test"> <mat-radio-button *ngFor="let option of options | filter:searchText" class="cssForRow" [value]="option" ...

Working with Angular 4 and Typescript: Transforming JSON data with json2typescript key mapping

Apologies for the confusion in my previous explanation. Let me clarify my question: In my Angular 4 application, I am using json2typescript to handle JSON to object conversion. However, I am facing an issue where the class structure I have defined does no ...

The specified property is not recognized by the type in TypeScript

I have set up a basic form with validation in Ionic 2. The form functioned properly when I used 'ionic serve' but encountered issues when running 'ionic run'. My suspicion is that the problem lies within my TypeScript code, specifically ...

Guide to successfully passing a function as a prop to a child component and invoking it within Vue

Is it really not recommended to pass a function as a prop to a child component in Vue? If I were to attempt this, how could I achieve it? Here is my current approach: Within my child component - <template> <b-card :style="{'overflow-y&apo ...

Issue encountered after updating Ionic 2: main.ts file cannot be located

After updating my Ionic 2 and running 'ionic serve' on my project, I encountered the following errors: What steps should I take to address these errors? ...

Angular interceptor allows the execution of code after the outgoing request has completed its process

In the process of creating a simple interceptor, I have encountered an issue. The interceptor is designed to check if an outgoing request is targeting a specific endpoint type, namely events and favoriteevents. While the interceptor works almost as intend ...

Is there a way to enhance the readability of intellisense output for Typescript generics using the Omit method?

Scenario: I have customized a third-party library for users by removing two properties from all functions in the library. I have implemented a function to achieve this, along with executing a bootstrap function if provided. Here is the code snippet: const ...