标签: angular-formly

如何在表单中添加功能,以便用户可以通过单击"添加"添加更多输入字段.这使用角度形式库.

以下是精确功能的示例,但仅使用angularjs.

动态添加表单字段

尝试设置ngx-formly-material-file，但出现错误：装饰器不支持函数调用，但调用了“FileTypeModule”

我试图导出 FileTypeModule，但得到了同样的错误

export const fileTypeModule = FileTypeModule.forRoot();

@NgModule({
  imports: [fileTypeModule]

})

我试图为角形重复部分创建一个自定义验证器.

只有当百分比输入的总和为100时,表格才有效.例如,如果重复部分有2个字段50和50应该是有效选项或25和75,依此类推.

当我为了做到这一点而在JSbin上工作时,我发现重复的模型实际上并没有更新onKeydown.因此,迭代所有重复节值并计算它们的总和是不可能的.

我也试过modelOptions: { updateOn: 'Keydown' }没有成功.它实际上使得验证器根本不被调用.

UPDATE

我从匹配字段示例中提出了以下解决方案.不幸的是,似乎它的自我有一个问题的例子.

使用以下JSbin进行播放,并看到有很多情况下调用验证器并返回true但字段/字段仍然保持红色(表示它们有问题).

这是JSBin.

我正在努力学习如何坚定地使用角度,并且我无法理解官方网站上的指南和示例中使用的一些语法.在定义按钮表单控件时,我看到了这个模板:

<div><button type="{{::to.type}}" class="btn btn-{{::to.btnType}}" ng-click="onClick($event)">{{to.text}}</button></div>

我的问题是:"to.type"和"to.btnType"之前"::"的含义是什么？怎么用？这与定义它有什么不同:

<a ng-class="{'btn-primary': to.isPrimary, active: to.isActive}" class="btn, btn-default"/>

我正在尝试使用Angular Datetime Picker作为Angular Formly输入类型.我已经使它工作,我可以编辑和设置一个正确添加到绑定模型的值.

但是,我无法在常规输入字段中显示验证错误消息.

JS Bin和我到目前为止所得到的.正如您所看到的,当您退出该字段时,只有在您尝试提交时才会显示红色.并且错误消息永远不会显示出来.

形式配置:

formlyConfigProvider.setType({
  name: 'datepicker',
  templateUrl: "custom-template.html",
  overwriteOk: true,
  wrapper: ['bootstrapHasError'],
  defaultOptions: function defaultOptions(options) {
    return {
      templateOptions: {
        validation: {
          show: true
        }
      }
    };
  }
});

formlyConfigProvider.setWrapper({
  name: 'validation',
  types: ['input', 'datepicker'],
  templateUrl: 'error-messages.html'
});

字段

vm.fields = [
  {
    key: 'text',
    type: 'input',
    templateOptions: {
      label: 'Text',
      placeholder: 'Write something',
      required: true
    },
  },
  {
    key: 'date',
    type: 'datepicker',
    templateOptions: {
      label: 'Date',
      placeholder: 'Pick …

我创建了一个 Angular Material 日期选择器组件来与 一起使用formly，并尝试将其设置为使用 GB 作为区域设置，以便日期显示为26/07/2019。但是，当输入日期时，它仍然解析为美国，导致显示无效日期错误。

我尝试包含moment该MomentDateAdapter模块，但无法解决问题。

这是一个堆栈闪电战

我已经像这样设置我的提供者：

providers: [   
  { provide: LOCALE_ID, useValue: 'en-GB' },
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
]

我的组件如下所示：

import { Component, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FieldType } from '@ngx-formly/material';
import { MatInput } from '@angular/material';

import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} …

在阅读了很多帖子后，我决定这应该有效：

vm.model.myChange = function(element) {
  console.log(element);
}

.. 在 vm.fields 中：

{
"key": "transportation",
"type": "select",
"templateOptions": {
  "label": "How do you get around in the city",
  "valueProp": "name",
  "onChange": "model.myChange()", // ADDED
  "options": [{
    "name": "Car"
  }, {
    "name": "Helicopter"
  }]
}

在实践中这没有效果，即我的函数没有被调用。生成的表单也不包含对我的函数的引用。

我找不到如何执行此操作的工作示例。有什么建议？

谢谢。保罗

我使用Angular Formly制作的自定义模板有问题.模板有一个输入文本和两个用于减小和增加此输入的模型值的按钮.问题是向下按钮工作正常并减少模型,但向上按钮不会增加,而是执行$ scope.down()的相同操作.我错了什么？

HTML模板:

  <span class="spinner">
    <button class="button decrease" ng-click="down()"></button>
    <input type="text" ng-model="model[options.key]" name="{{options.key}}" />
    <button class="button increase" ng-click="up()"></button>
  </span>

形式领域:

item.key = key;
item.type = "my_spinner";
item.defaultValue = item.templateOptions.placeholder;
item.controller = function($scope) {
                        $scope.down = function () {
                          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] - 1;
                        };
                        $scope.up = function () {
                          $scope.model[$scope.options.key] = $scope.model[$scope.options.key] + 1;
                        }
    };
}

更新:JSBin中的代码似乎工作http://jsbin.com/fakunoqeti/edit?html,js,console,output所以它可能是什么问题？我需要一个有角度的专家D:D:

我正在尝试评估Formly。这是我的第一次尝试 - 我想在文本区域的值发生变化时调用一个方法。这是我尝试过的代码 - 到目前为止它似乎不起作用我不确定我的 templateOptions 语法是否错误或者我是否应该访问不同的输入值。

 form = new FormGroup({});
  model = { defaultText: this.defaultText } ;
  label = this.defaultText ;
  fields: FormlyFieldConfig[] = [{
    key: 'editor',
    id: 'editor',
    name: 'editor',
    type: 'textarea',
    templateOptions: {
      placeholder: this.defaultText,
      onChange: this.previewText = this.parseMarkDownText(this.form.get('editor').value),
   //   appearance: 'fill'
    }
  }];

这个问题可能看起来很愚蠢，但就像两周前一样，我安装它没有任何问题。现在看起来是这样的：

ng 添加@ngx-formly/schematics --ui-theme=material

我尝试在材料和 cdk 模块之后/之前安装它，但结果是相同的。我还尝试安装所有单独的正式模块（基于我之前创建的项目），但出现此错误：

The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

我还尝试删除节点模块和yarn.lock并再次初始化它，但仍然不起作用。而且当我创建表单时它也不会显示。我也尝试用yarn add ...或-ui-theme=bootstrap来安装它，但结果是一样的。在安装之前也尝试过服务（在堆栈上的某个地方读取它），但它也不起作用。

我听说节点 v.15.6.0 有一些问题，但我不确定是否是这样。这也是我的版本：

纱线版本是 1.22.5

更新：我尝试使用纱线升级--最新升级所有软件包，然后再次正式安装。之后：

 ng add @ngx-formly/schematics --ui-theme=material

我明白了：

An unhandled exception occurred: Cannot find module '@schematics/angular/utility/config'
Require stack:
- /home/wiktor/angular-material-template/node_modules/@ngx-formly/schematics/utils/ast.js
- /home/wiktor/angular-material-template/node_modules/@ngx-formly/schematics/src/ng-add/index.js
- /home/wiktor/angular-material-template/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /home/wiktor/angular-material-template/node_modules/@angular-devkit/schematics/tools/index.js
- /home/wiktor/angular-material-template/node_modules/@angular/cli/utilities/json-schema.js
- /home/wiktor/angular-material-template/node_modules/@angular/cli/models/command-runner.js
- /home/wiktor/angular-material-template/node_modules/@angular/cli/lib/cli/index.js
- /usr/lib/node_modules/@angular/cli/lib/init.js
- /usr/lib/node_modules/@angular/cli/bin/ng …