如何使用DevExtreme提交角形

Question

我尝试使用AngularJS集成验证并提交dxForm。不太清楚这是怎么回事。

每当我点击提交按钮时，都会收到错误：

Cannot read property 'validate' of undefined - 调试它在寻找validationGroup属性我认为按钮。

我已尝试使用和不指定validationGroups的代码 - 两者都给出了相同的错误。这些字段在值更改时单独验证，但在提交表单时不会验证。

<div class="row" ng-controller="SigninCtrl">
    <div class="center-block col-md-4">
        <div class="portlet-container">
            <div class="portlet bordered">
                <div class="portlet-title">
                    {{'users.signinTitle' | translate}}<br/>
                </div>
                <div class="portlet-body">
                    <div class="form-container">
                        <form name="SigninForm" id="SigninForm" ng-submit="signin()">
                            <div dx-form="{
    formData: loginData,
    showRequiredMark: false,
    bindingOptions: {
        'formData.loginValue': 'loginData.loginValue',
        'formData.passwordValue': 'loginData.passwordValue'
    },
    items: [{
      dataField: 'userId',
      label: {
        text: '{{'users.email' | translate}}'
      },
      cssClass: 'login-item',
      editorOptions: {
        validationGroup: 'mainGroup',
        placeholder: '{{'users.signinPlaceholder' | translate }}'
      },
      validationRules: [{
        type: 'required',
        message: '{{fieldData.requiredField | translate:fieldData.email}}'
      },
        {
          type: 'email',
          message: fieldData.emailFormat
        }]},
      {
        dataField: 'password',
        cssClass: 'padding-password login-item',
        label: {
          text: '{{'users.password' | translate }}'
        },
        editorOptions: {
          validationGroup: 'mainGroup',
          mode: 'password'
        }, validationRules: [{
        type: 'required',
        message: '{{fieldData.requiredField | translate:fieldData.password}}'
      }]
      },
      {
        dataField: 'rememberMe',
        label: {
          text: '{{'users.rememberMe' | translate }}'
        },
        editorOptions: {
          validationGroup: 'mainGroup'
        },
        editorType: 'dxCheckBox'
      }]

                        }"></div>
                            <div class="form-actions">
                                <div class="button white-text green-button" dx-button="{
                                text: '{{'users.signin' | translate}}',
                                type: 'success',
                                useSubmitBehavior: true,
                                validationGroup: 'mainGroup'

                             }"></div>
                                <div class="button cancel" dx-button="{
                                text: '{{'common.cancel' | translate}}',
                                onClick: cancel
                            }"></div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="portlet-footer">
                    <span class="font-heavy">Don't have an account?</span> <a ui-sref="register">Register here</a>
                </div>
            </div>
        </div>
    </div>
</div>

控制器代码如下：

var app = angular.module('ocs.admin.ui');

app.controller('SigninCtrl', ['$scope', 'authorityService', '$state', function ($scope, authorityService, $state) {

  var loginData = {
    rememberMe: false
  };

  // added because of quote nesting issues in HTML page
  $scope.fieldData = {
    requiredField: 'validation.requiredField',
    emailFormat: 'validation.emailFormat',
    email: {
      'field': "Email"
    },
    password: {
      'field': "Password"
    }
  };

  $scope.loginData = loginData;

  $scope.signin = function(e){
    alert('signing in ');
  };

  $scope.cancel = function(){
    $state.go('home');
  }

}]);

什么是最好的＆＃39;使用angularJS和devExtreme验证和提交表单的方法？