Is there any complete sample for RadDataForm? - nativescript

Question

I'm considering using NativeScript-Vue v7.0 for production use and looking into its validation features of data form.
I suppose RadDataForm would be an appropriate component for customizing validation rules, but the documentation following is for NativeScript v6.0, and the source code displayed is corrupted.
https://docs.nativescript.org/vuejs/ns-ui/dataform/dataform-validation
Is there any complete sample code that implements regex-based validation rules and customized error messages?

Answer 1

Documentation (v7): RadDataForm Getting Started
The sample code in the link you provided (updated) is also available on GitHub:
https://github.com/ProgressNS/nativescript-ui-samples-vue/blob/master/dataform/app/examples/Validation.ts
email property with RegEx validator from the link above
Complete example:
import { Frame } from 'tns-core-modules/ui/frame';
import { RegisteringUser } from '../data';
const description = 'Validation';
export default {
name: 'Validation',
description: description,
template: `
<Page>
<ActionBar :title="title">
<NavigationButton text="Back" android.systemIcon="ic_menu_back" #tap="onNavigationButtonTap"></NavigationButton>
</ActionBar>
<StackLayout>
<RadDataForm
ref="dataform"
:source="person"
:metadata="personMetadata">
</RadDataForm>
<Label :text="text"
textWrap="true"
margin="12"
android:color="#C73339"
ios:color="red"
horizontalAlignment="center"></Label>
<Button
text="Login"
margin="12"
horizontalAlignment="stretch"
#tap="onTap()"></Button>
</StackLayout>
</Page>
`,
data () {
return {
title: description,
person: new RegisteringUser(),
text: null,
personMetadata: {
'isReadOnly': false,
'commitMode': 'Immediate',
'validationMode': 'OnLostFocus',
'propertyAnnotations':
[
{
'name': 'username',
'displayName': 'Nick',
'index': 0,
'validators': [
{ 'name': 'NonEmpty' },
{ 'name': 'MaximumLength', 'params': { 'length': 10 } }
]
},
{
'name': 'email',
'displayName': 'E-Mail',
'index': 1,
'editor': 'Email',
'validators': [{
'name': 'RegEx',
'params': {
'regEx': '^[a-zA-Z0-9\\+\\.\\_\\%\\-\\+]{1,256}\\#telerik.com$',
'errorMessage': 'Please provide your #telerik.com email.'
}
}]
},
{
'name': 'password',
'displayName': 'Password',
'editor': 'Password',
'index': 2,
'validators': [
{
'name': 'NonEmpty',
},
{
'name': 'MinimumLength',
'params': {
'length': 6
}
},
]
},
{
'name': 'password2',
'displayName': 'Repeat Password',
'editor': 'Password',
'index': 3,
'validators': [
{
'name': 'NonEmpty',
},
{
'name': 'MinimumLength',
'params': {
'length': 6
}
},
]
},
{
'name': 'age',
'displayName': 'Age',
'index': 4,
'validators': [
{
'name': 'RangeValidator',
'params': {
'minimum': 1,
'maximum': 100,
'errorMessage': 'Age must be between 1-100.',
}
},
],
},
{
'name': 'agreeTerms',
'displayName': 'Agree Terms',
'index': 5,
'validators': [
{
'name': 'IsTrueValidator',
},
],
}
]
}
};
},
methods: {
onNavigationButtonTap() {
Frame.topmost().goBack();
},
onTap() {
let isValid = true;
const pName = this.$refs.dataform.getPropertyByName('username');
const pPwd = this.$refs.dataform.getPropertyByName('password');
const pPwd2 = this.$refs.dataform.getPropertyByName('password2');
if (pName.valueCandidate.toLowerCase() !== 'admin1') {
pName.errorMessage = 'Use admin1 as username.';
this.$refs.dataform.notifyValidated('username', false);
isValid = false;
} else {
this.$refs.dataform.notifyValidated('username', true);
}
if (!pPwd.valueCandidate) {
pPwd.errorMessage = 'Password is empty.';
this.$refs.dataform.notifyValidated('password', false);
isValid = false;
}
if (pPwd2.valueCandidate !== pPwd.valueCandidate) {
pPwd2.errorMessage = 'Password is not the same as above.';
this.$refs.dataform.notifyValidated('password2', false);
isValid = false;
} else {
this.$refs.dataform.notifyValidated('password2', true);
}
if (!isValid) {
this.text = 'Username or Password is not valid.';
} else {
this.text = '';
this.$refs.dataform.commitAll();
alert({
title: 'Successful Login',
message: `Welcome, ${this.person.username}`,
okButtonText: 'OK',
});
}
}
}
};