Angular Formly Forms - 从数组类型中删除 add/remove 按钮

Question

在使用 json 架构（草案 7）生成动态表单时，我在尝试从自定义数组组件中使用 remove/disable 按钮时遇到问题。我尝试了各种方法来解决这个问题，但似乎没有任何效果。

我想要实现的是，使用 ngIf* 到 show/hide 按钮或类似的东西在组件模板中禁用它们。有时数组组件应该显示这些按钮，有时不应该。这必须取决于在某个地方定义的特定属性，它可以很容易地被检查并且可以防止按钮渲染。

我尝试在 json 架构中设置 disable: true 属性，但我不知道如何从数组组件访问此属性 (我检查了组件内的 field 对象 - 没有影响）。我还尝试创建一个新组件，我在其中物理删除了这些按钮并将其命名为 arrayDisabled（还相应地更新了模式等）但是 field.fieldGroup 属性搞砸了（它抓住了一个根本不代表数组的无效对象），因此不会在表单内显示任何内容。

关于这方面的文档不多，因此不胜感激。

这是我的自定义组件：

import { Component } from '@angular/core';
import { FieldArrayType } from '@ngx-formly/core';

@Component({
  selector: 'formly-array-type',
  template: `
  <div class="mb-3">
    <legend *ngIf="to.label">{{ to.label | translate }}</legend>
    <p *ngIf="to.description">{{ to.description | translate }}</p>
    <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
      <formly-validation-message [field]="field"></formly-validation-message>
    </div>
    <div *ngFor="let field of field.fieldGroup;let i = index;" class="row">
      <formly-field class="col-10" [field]="field"></formly-field>
      <div *ngIf="isDisabled(field)" class="col-2 text-right">
        <button mat-flat-button color="warn" (click)="remove(i)">-</button>
      </div>
    </div>
    <div class="d-flex flex-row-reverse">
      <button mat-flat-button color="primary" (click)="add()">+</button>
    </div>
  </div>
  `,
  styles: [
    `button {min-width: 40px;}`,
    `div.ng-star-inserted {margin-left: 0px; margin-right: 0px;}`,
    `div.text-right {padding-left: 0px; padding-right: 0px;}`
  ]
})
export class ArrayTypeComponent extends FieldArrayType { }

这是我的 json 架构（草案 7）的示例：

"arrayOfItems": {
    "type": "array",
    "title": "My Array",
    "items": {
        "type": "object",
        "properties": {
            "itemA": {
                "type": "string",
                "title": "Item A"
            },
            "itemB": {
                "type": "string",
                "title": "Item B"
            },
            "itemC": {
                "type": "integer",
                "title": "Item C"
            },
        },
        "additionalProperties": false,
        "required": []
    }
}

下面是这个 json 模式的示例模型（它是一个简单的对象数组）：

"arrayOfItems": [{ itemA: "Item A" }, { itemB: "Item B" }, { itemC: 0 }]

最后但同样重要的是，这是我从我使用的共享模块导入的片段：

  imports: [
    FormlyModule.forRoot({
        types: [
            {
              name: 'array',
              component: ArrayTypeComponent,
              defaultOptions: {
                templateOptions: {
                  type: 'array',
                },
              },
            }, ...

提前致谢。

Answer 1

我能够通过在我的组件中设置一个 FormlyFormOptions formState 属性来解决我的问题，它会生成表单。

public options: FormlyFormOptions = {
  formState: {
    disabled: true
  }
}

我在我的格式标签上使用了选项属性，如下所示：

<formly-form [model]="..." [fields]="..." [options]="options" [form]="...">

之后，我能够在自定义 Formly 组件中使用此属性并从 class 角度 and/or *ngIf="formState.disabled" 像这样访问它 this.formState.disabled从模板的角度。

*ngIf 处理是在我的自定义组件模板中显示还是隐藏按钮。

Angular Formly Forms - 从数组类型中删除 add/remove 按钮

Angular Formly Forms - removing add/remove buttons from array type

typescript

angular-formly

angular-cli-v8