0

これはangular-formlyを使用しており、次のように複数のチェックボックステンプレートを作成しました:

    <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.labelandは and でoptions.optionsある必要がto.labelありto.optionsます。ただし、これが唯一の問題かどうかはわかりません。

また、スクリプト タグ ビジネスは私には奇妙に思えますが、私は常に: template: require('path-to-my-template')と Webpack を使用しているため、確信が持てません。

于 2015-05-27T18:10:25.790 に答える