How do I indicate a DevExtreme dx-date-box is required?

Question

So far I've found this related answer: Angular 2 dev extreme dx-date-box validation of required field

And this supposedly helpful AngularJS example: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Validation/Overview/AngularJS/Light/

...but none of this is working for me in an Angular 6 project. There doesn't seem to be a dx-validator (or dxValidator) property that I can set. I've used:

@ViewChild(DxDateBoxComponent) dateBox: DxDateBoxComponent;

...to get a reference to the date box component, but I haven't found any methods on the object I can use, or fields I can set, to get the job done. Whatever this.dataBox.validator is, it requires a bunch of private fields that I wouldn't know how to define, so I don't think it has anything to do with the kind of validators I've seen in the examples I've looked at.

Answer 1

I finally stumbled on the answer I was looking for. Unlike the examples I found that looked like this:

<dx-date-box dx-validator="myValidatorRules"...

...which didn't translate from AngularJS to Angular like this:

<dx-date-box [dx-validator]="myValidatorRules"...

...what I needed was to add dx-validator not as an attribute, but as a nested component:

<dx-date-box...>
  <dx-validator [validationRules]="myValidatorRules"></dx-validator>
</dx-date-box>

With that, adding validation rules to myValidatorRules works just like in the sample code I've seen, in this case needing the rule {type: 'required'}.