0

这是使用角度形式，我创建了多个复选框模板，如下所示：

    <script type="text/ng-template" id="multi-checkbox-template.html">
<div class="radio-group"
     ng-class="{'has-error': options.formControl.$invalid}">
    <label class="control-label">
        {{options.label}}
        {{options.required ? '*' : ''}}
    </label>
    <div class="radio"
         ng-repeat="(key, option) in options.options">
        <label>
            <input type="checkbox"
                   formly-dynamic-name="id + '_'+ $index"
                   formly-custom-validation="options.validators"
                   id="{{id + '_'+ $index}}"
                   aria-describedby="{{id}}_description"
                   ng-value="option.value"
                   ng-required="options.required"
                   ng-model="$parent.model[$parent.options.key || $parent.index][option.name]">
            {{option.name}}
        </label>
        <p id="{{id}}_description"
           class="help-block"
           ng-if="option.description">
            {{option.description}}
        </p>
    </div>
</div>
</script>

这是配置：

 formlyConfigProvider.setType(
      {
        name: 'multi-checkbox',
        templateUrl: 'multi-checkbox-template.html',
        wrapper: ['bootstrapLabel', 'bootstrapHasError']
      }

这是控制器：

{
            "key": "Q2",
            "type":'multi-checkbox',
             "templateOptions": {
             "label": "What languages are you familiar with?",
             "options": [
                {                    {
                  "name": "spanish",
                  "value": "spnsh"
                },
                {
                  "name": "french",
                  "value": "frnch"
                },
                {
                  "name": "more",
                  "value": "more"
                }
              ]
            }

          }
        ];

问题是，即使出现错误，页面也没有显示任何内容。我知道关于服务器响应的路径是正确的`GET /multi-checkbox-template.html 200 1ms 这是我收到的警告，

angular-formly-bootstrap formly-field apiCheck failed! Required `label` not specified in `Argument 1/value/templateOptions`. Must be `String`  https://github.com/formly-js/angular-formly/blob/6.10.0/other/ERRORS_AND_WARNINGS.md#formly-field-type-apicheck-failed

You passed:
{
  "key": "Q2",
  "type": "multi-checkbox",
  "templateOptions": {
    "to.label": "In what languages does your firm provide live chat support?",
    "to.options": [
      {
        "name": "english",
        "value": "eng"
      },
      {
        "name": "spanish",
        "value": "spnsh"
      },
      {
        "name": "french",
        "value": "frnch"
      },
      {
        "name": "more",
        "value": "more"
      }
    ]
  },
  "$$hashKey": "object:592",
  "data": {},
  "validation": {
    "messages": {}
  },
  "id": "formly_1_multi-checkbox_Q2_5"
}

With the types:
{
  "key": "string",
  "type": "string",
  "templateOptions": {
    "to.label": "string",
    "to.options": {
      "0": {
        "name": "string",
        "value": "string"
      },
      "1": {
        "name": "string",
        "value": "string"
      },
      "2": {
        "name": "string",
        "value": "string"
      },
      "3": {
        "name": "string",
        "value": "string"
      }
    }
  },
  "$$hashKey": "string",
  "data": "Object",
  "validation": {
    "messages": "Object"
  },
  "value": "Function",
  "runExpressions": "Function",
  "resetModel": "Function",
  "updateInitialValue": "Function",
  "id": "string",
  "initialValue": "undefined"
}

The API calls for:
{
  "__apiCheckData": {
    "strict": false,
    "optional": false,
    "type": "shape"
  },
  "shape": {
    "templateOptions": {
      "__apiCheckData": {
        "strict": false,
        "optional": false,
        "type": "shape",
        "error": "THIS IS THE PROBLEM: Required `label` not specified in `templateOptions`. Must be `String`"
      },
      "shape": {
        "label": "String <-- YOU ARE MISSING THIS"
      }
    }
  }
}

`如果有任何帮助，我将非常感谢你。

4

2 回答 2

3

我认为您对options上面的一些引用应该options.templateOptions改为引用（您实际上可以将其to称为快捷方式）。例如，options.label和options.options应该是to.label和to.options。不确定这是否是唯一的问题。

另外，脚本标签业务对我来说似乎很奇怪，但我总是使用： template: require('path-to-my-template')和 Webpack，所以我不能确定。

于 2015-05-27T18:10:25.790 回答
0

formlyConfigProvider.setType()中的templateUrl不是文件的目录链接。

templateUrl实际上是指脚本标签中的id属性

你应该做的是：

 formlyConfigProvider.setType(
  {
    name: 'multi-checkbox',
    templateUrl: 'custom-template.html'
    wrapper: ['bootstrapLabel', 'bootstrapHasError']
  }

并在您的模板 html 文件中：

<script type="text/ng-template" id="custom-template.html">
    <!-- your custom template should be here -->
</script>
于 2015-05-27T02:56:02.603 回答