当角度形式使用时,角度上传不填充模型

时间:2015-06-29 22:46:39

标签: javascript angularjs angular-formly

options.data.fieldToMatch

大家好,请耐心等待,因为这是我在StackOverflow上的第一篇文章。我多年来一直是匿名用户,并且总是通过搜索找到我的问题的答案。然而,这一点让我感到困惑。

我遇到了使用角度1.4将角度上传与角度形式集成的问题。选择文件时,表单模型不会更新。

我在http://jsbin.com/cozanowure/edit?js的jsbin上有一个代码示例,在http://plnkr.co/edit/aDi8breDPFFGrNdzh2i4?p=preview上的plunkr上有相同的代码

以下是上面提供的2个链接上的相同代码:

使用Javascript:

(function() {
  'use strict';

  var app = angular
    .module('app', ['lr.upload', 'formly', 'formlyBootstrap']);

  app.run(['formlyConfig', function(formlyConfig) {
    formlyConfig.setType({
      name: 'licensefile',
      extends: 'input',
      defaultOptions: {
        ngModelAttrs: {
          multiple: {
            bound: 'ng-multiple',
            attribute: 'multiple'
          },
          accept: {
            bound: 'ng-accept',
            attribute: 'accept'
          }
        },
        templateOptions: {
          label: 'License File',
          type: 'file',
          required: true,
          multiple: false,
          accept: '*.lic'
        },
        validation: {
          messages: {
            required: function(viewValue, modelValue, scope) {
              //return scope.to.label + ' is required '
              return 'Please select a license file';
            }
          }
        }
      }
    });

    formlyConfig.setType({
      name: 'email',
      extends: 'input',
      defaultOptions: {
        templateOptions: {
          type: 'email',
          label: 'Email Address',
          placeholder: 'email address',
          pattern: '[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)',
          message: '$viewValue + " is not a valid email address"'
        },
        validation: {
          messages: {
            required: function(viewValue, modelValue, scope) {
              return 'Please enter an email address';
            },
          }
        }
      }
    });
  }]);

  app.controller('AppController', function() {
    var vm = this;
    vm.model = {};
    vm.fields = [{
      type: 'licensefile',
      key: 'lfile',
      templateOptions: {
        label: 'License File',
        focus: true,
      }
    }, {
      type: 'input',
      key: 'someTextField',
      templateOptions: {
        label: 'Some Text'
      }
    }];
  });
}());

HTML:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="//rawgit.com/leon/angular-upload/master/angular-upload.min.js"></script>
    <script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
    <script src="//rawgit.com/formly-js/angular-formly/master/dist/formly.js"></script>
    <script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.min.js"></script>

    <script src="app.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AppController as vm">
    <pre>{{vm.model | json}}</pre>
    <form name="fileForm" >
      <formly-form model="vm.model" fields="vm.fields" ></formly-form>
    </form>
  </body>

</html>

对于为什么模型没有使用所选文件进行更新的任何帮助和指导将不胜感激。

提前致谢, 迈克尔

0 个答案:

没有答案