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.