Angular Formly Forms - удаление кнопок добавления / удаления из типа массива

Question

У меня есть проблема при попытке удалить / отключить кнопки из настраиваемого компонента массива, который я использую с Formly Forms при генерации динамических c форм с использованием схемы json (черновик 7). Я пробовал разные вещи, чтобы решить эту проблему, но, похоже, ничего не работает.

Я хочу достичь, используя ngIf*, чтобы показать / скрыть кнопки или что-то подобное, чтобы отключить их внутри шаблона компонента. Иногда компонент массива должен отображать эти кнопки, иногда - нет. Это должно зависеть от определенного свойства c, определенного где-то, его можно легко проверить и предотвратить рендеринг кнопок.

Я пытался установить свойство disable: true внутри схемы json, но я не не знаю, как получить доступ к этому свойству из компонента массива (я проверил объект field внутри компонента - никакого влияния). Я также попытался создать новый компонент, в котором я физически удалил эти кнопки и назвал их arrayDisabled (также обновил схему соответственно et c.), Но свойство 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

Я смог решить свою проблему, установив свойство FormState FormState внутри моего компонента, который генерирует форму.

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

Я использовал свойство options для моего тега formly-form, например:

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

После этого я смог использовать это свойство внутри пользовательского компонента Formly и обращаться к нему, как этот this.formState.disabled с точки зрения класса и / или *ngIf="formState.disabled" с точки зрения шаблона.

*ngIf определяет, показывать или скрывать кнопки внутри моего шаблона компонентов.