标签: angular-formly

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

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与角度ui-select一起使用$ http作为结果.

选项应该在用户输入时刷新.当我从另一个文本输入设置模型时,ui-select正确更新并根据在文本框中键入的内容显示相应的结果.

然而,当我直接输入ui-select框时,我没有返回值,并且templateOptions.options函数不会触发,并且$viewvalue不会更新.

我似乎也无法访问$select.search已更新但在expressionProperties中不可用的结果.

请参阅以下重现错误的JSBin:

http://jsbin.com/peducofaje/edit

我很感激这方面的帮助.

我正在试图找出如何在多个指令中保存和响应多个表单.

简要概述: 当前视图的屏幕截图

我有三个包含表单的选项卡,第四个包含JsTree(Groups).三个选项卡中的每一个都包含一个指令,该指令又包含一个Formly表单.选项卡由main指令包装,该指令包含一个footer指令,右下角有save和cancel按钮.

主要指令:

/**
 * Displays the ui for editing a specific user
 */
export function UserDetailsDirective() {
	class UserDetailsDirective {

		/*@ngInject*/
		constructor(
			$stateParams,
			userService,
			formlyChangeService
		) {
			this.currentUser = this.currentUser || {};
			this.originalUser = this.originalUser || {};

			this.userForms = {
				mainData: {},
				personalData: {},
				basicSettings: {}
			};

			this.savingAllowed = true;
              
            /* Second try: Registering a callback at the change service, which will be executed on any field change in the passed form (mainData) */
            formlyChangeService.onFormChange('mainData', () => …

我正在尝试评估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 …

是否可以以角度形式添加输入类型作为日期.？我正在尝试使用type:date但它没有在其中定义.那么,如何获得它？

我已经angular-formly-templates-bootstrap通过凉亭安装了一个我一直在研究的项目.但是当我尝试以角度注入它时,我收到以下错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.1/$injector/nomod?p0=formlyBootstrap
    at http://localhost:3000/bower_components/angular/angular.js:68:12
    at http://localhost:3000/bower_components/angular/angular.js:1949:17
    at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
    at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
    at http://localhost:3000/bower_components/angular/angular.js:4355:22
    at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
    at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
    at http://localhost:3000/bower_components/angular/angular.js:4356:40
    at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
    at loadModules …

有没有办法在形式上的json结构中包含一个"tab"结构来轻松构建bootstrap-ui标签？例如某种类似的东西:

{
  Tabs: [
    {
      heading: 'Tab 1',
      fields: [
               ....
              ]
    },
    {
      heading: 'Tab 2',
      fields: [
               ....
              ]
    },
  ]
}

是否容易建立这种类型的结构？或者我应该在选项卡数组上对ng-repeat内部进行ng-repeat？或者他们的表现是关注那个或任何其他问题？

<formly-form model="vm.model" fields="step.inputs" options="vm.options">
    <div style="text-align:right">
        <button type="submit" wz-next class="btn btn-primary submit-button" ng-disabled="innerForm.$invalid">Næste</button>
    </div>
</formly-form>

使用上面的标记将生成一个更少的标准形式,但我的问题是基于templateOptions我的字段中设置的值,我希望能够将一个类添加到formly-field div.

所以一个例子是:

inputs: [
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatLeft'
        }
    },
    {
        key: 'someKey',
        type: 'input',
        templateOptions: {
            label: 'some text',
            class: 'floatRight'
        }
    }]

应该生成2个这样的形式字段:

<div formly-field ng-repeat="field in fields " class="floatLeft ..." ...>...</div>
<div formly-field ng-repeat="field in fields " class="floatRight ..." ...>...</div>

所以这个类被添加到div中,我尝试过使用包装器,但是它们不会包裹在formly-field div中.由于step.inputs是一系列领域,我不知道该怎么做.

我正在使用Angular Formly,如果模型是范围的值,就像字符串一样,效果很好:

{
    key: 'name',
    type: 'input'
}

问题是我使用更精细的对象来处理模型,使用"controller as"语法并将名称作为用户对象的一部分:

vm.user = {name: 'john', lastname: 'doe'} 

当然,关键是:

{
    key: 'user.name',
    type: 'input'
}

(通常vm以形式表示法从键中取出).

问题是Formly使用括号表示法来处理模型:

template = '<input ng-model=\"model[options.key]\">'

处理时,吐出此输出:

<input name="bd.form_input_user.name_1" type="text" ng-model="model.user.name">

当然,模型没有用户对象和空字段显示.

所以,我的问题是:当它是一个更复杂的对象时,如何将适当的对象传递或链接到形式模型？

提前致谢.