2

options.data.fieldToMatch

皆さん、こんにちは。これが StackOverflow に関する私の最初の投稿ですので、ご容赦ください。私は何年もの間匿名ユーザーであり、検索によって常に質問に対する答えを見つけてきました。しかし、これは私を少し当惑させます。

angular-upload と angular-formly を angular 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>

選択したファイルでモデルが更新されない理由について、ヘルプとガイダンスをいただければ幸いです。

前もってありがとう、マイケル

4

0 に答える 0