Angular Formly Giant CheckBox和重复标签问题

时间:2016-10-15 20:21:47

标签: html css angularjs angular-formly

我有一个链接到我使用Angular和Angular形式动态形式创建的plunker以及angular-message和angular-animate以添加一些天赋......这更像是我正在研究的概念证明并将采取一些这些想法并将其实施为我正在帮助建立的新门户网站。

但是我遇到了一个问题,我还没弄清楚到底是怎么解决的:

输入和标签效果很好,但Checkbox和Select Dropdown不按预期工作......

所有这些首先都有重复的标签。我添加了一个复选框模板并解决了重复标签问题,但是它在另一个问题中添加了使复选框变得庞大并使它们居中,这是我不想要的。

选择下拉列表仍然有重复的标签,我还没想出如何将下拉列表的内容设置为粗体。

如果有人可以看一看,让我知道我做错了什么,我会很感激。

要访问复选框,您需要在执行此操作后有效填写表单(或至少输入底部有效的10位数字),弹出第一个复选框,询问您是否超过18,然后是另一个弹出复选框询问您是否住在美国。如果两者都被选中,则选择下拉列表会弹出状态。

以下是关于plunker的链接,非常感谢任何帮助!

https://plnkr.co/edit/ADpFUHb2U2j9Q93uWUwN?p=info

    <script type="text/ng-template" id="checkbox-template.html">
  <input type="{{options.templateOptions.type || 'checkbox'}}"
       class="form-control"
       id="{{id}}"
       formly-dynamic-name="id"
       formly-custom-validation="options.validators"
       placeholder="{{options.templateOptions.placeholder}}"
       aria-describedby="{{id}}_description"
       ng-required="options.templateOptions.required"
       ng-disabled="options.templateOptions.disabled"
       ng-model="model[options.key]">
</script>
PS:还有最后一件事......我想让输入框变小,但是当我这样做时,复选框最终会出现在文本的中间(当它们的大小合适而没有模板和双标签时 - - 这可能就是为什么他们现在在屏幕的中间 - 它们在它们不是巨大的时候就在同一个地方)

2 个答案:

答案 0 :(得分:0)

不确定它是什么,但它似乎与自定义模板有关...

我查看了一些形式网站示例上的其他代码,这些代码与消息做类似的事情,而没有以这种方式创建这些模板,一旦我更改了代码,它就消失了并停止了...

答案 1 :(得分:0)

在某些情况下,标签同时显示在复选框之前和之后。

我查看了用于表单域包装程序的ngx-formly引导程序source,发现正在有条件地输出附加标签。但是它也显示了如何抑制它。

所以,我只是将'hideLabel'设置为true,而我又回到了复选框的一个标签!

  fieldBoolean.templateOptions.label = "Are you sure?";
  fieldBoolean.templateOptions['hideLabel'] = true;