RadDataForm 有完整的示例吗？

Posted 2023-04-13

【中文标题】RadDataForm 有完整的示例吗？

【英文标题】：Is there any complete sample for RadDataForm?

【发布时间】：2021-04-14 01:49:49

【问题描述】：

我正在考虑将 NativeScript-Vue v7.0 用于生产用途，并研究其数据表单的验证功能。

我想RadDataForm 将是自定义验证规则的合适组件，但以下文档适用于 NativeScript v6.0，并且显示的源代码已损坏。

https://docs.nativescript.org/vuejs/ns-ui/dataform/dataform-validation

是否有实现基于正则表达式的验证规则和自定义错误消息的完整示例代码？

【参考方案1】：

文档 (v7)：RadDataForm Getting Started

您提供的链接中的示例代码 (updated) 也可以在 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

完整示例：

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',
        );
      
    
  
;