2

options.data.fieldToMatch

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

我在使用 angular 1.4 将 angular-upload 与 angular-formly 集成时遇到问题。选择文件时，表单模型未更新。

我在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>

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

在此先感谢，迈克尔

4

0 回答 0