Angular Formly Forms-从数组类型中删除添加/删除按钮

Question

当使用json模式生成动态表单时，尝试从用于Formly Forms的自定义数组组件中删除/禁用按钮时出现问题（草稿7）。我已经尝试了各种方法来解决此问题，但似乎没有任何效果。

我想要实现的是，使用ngIf*显示/隐藏按钮或类似的按钮以在组件模板中禁用它们。有时，阵列组件应显示这些按钮，有时则不显示。这必须取决于在易于检查的位置定义的特定属性，并且可以防止按钮呈现。

我试图在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标签上使用了options属性，如下所示：

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

[之后，我可以在自定义Formly组件中使用此属性，并从类的角度访问此this.formState.disabled，并且/或者从模板的角度访问此*ngIf="formState.disabled"。

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