проблема angular6-json-schema-form с множественным выбором события изменения формы - PullRequest
1 голос
/ 21 сентября 2019

Текущая реализация для множественного выбора не показывает <mat-select [formControl]="toppings" multiple>, потому что здесь для типов 'массив' и 'enum' показывает 'флажки'.Итак, я переопределил это поведение следующим образом:

myCustomWidgets = {
    submit: NoneComponent,
    checkboxes: MaterialSelectComponent
  };

Я создал файл MaterialSelectComponent, который является копией того же файла из 'angular6-json-schema-form', а затем добавил пользовательскийвиджет как ниже.

<json-schema-form loadExternalAssets="true"
                      [schema]="formData?.schema"
                      [form]="formData?.form"
                      framework="material-design"
                      [widgets]="myCustomWidgets"
                      (isValid)="isFormValid($event)"
                      (onChanges)="onFormChange($event)"
                      (onSubmit)="onFormSubmit($event)">
    </json-schema-form>

У меня есть 4 элемента: один текст, одна дата, один одиночный выбор и один множественный выбор, как показано ниже.

    {
    "form": [{
            "type": "section",
            "htmlClass": "row",
            "items": [{
                    "type": "section",
                    "htmlClass": "col-xs-6 item-padding",
                    "items": ["my_text"]
                }, {
                    "type": "section",
                    "htmlClass": "col-xs-6 item-padding",
                    "items": ["my_date"]
                }
            ]
        }, {
            "type": "section",
            "htmlClass": "row",
            "items": [{
                    "type": "section",
                    "htmlClass": "col-xs-6 item-padding",
                    "items": ["my_multi_select"]
                }, {
                    "type": "section",
                    "htmlClass": "col-xs-6 item-padding",
                    "items": ["my_single_select"]
                }
            ]
        }
    ],
    "schema": {
        "schema": "http://json-schema.org/draft-06/schema#",
        "type": "object",
        "title": "Form Details",
        "description": "",
        "properties": {
            "my_multi_select": {
                "titleSource": "my_multi_select",
                "fieldDisplay": "Select More",
                "title": "Select More",
                "type": "array",
                "pattern": null,
                "description": "Multi Select",
                "format": "",
                "required": false,
                "multiple": true,
                "uniqueItems": true,
                "items": {
                    "type": "string",
                    "enum": ["A", "B", "C", "D"]
                },
                "readonly": false
            },
            "my_text": {
                "titleSource": "my_text",
                "fieldDisplay": "My Text",
                "title": "My Text",
                "type": "string",
                "pattern": "",
                "description": "Enter Text",
                "format": "",
                "required": true,
                "readonly": false
            },
            "my_date": {
                "titleSource": "my_date",
                "fieldDisplay": "My Date",
                "title": "My Date",
                "type": "string",
                "pattern": "",
                "description": "Enter Date",
                "format": "date",
                "required": true,
                "readonly": false
            },
            "my_single_select": {
                "titleSource": "my_single_select",
                "fieldDisplay": "My Single Select",
                "title": "My Single Select",
                "type": "string",
                "pattern": "",
                "description": "Enter Date",
                "format": "date",
                "required": true,
                "readonly": false,
                "enum": [
                    "One",
                    "Two",
                    "Three",
                    "Four"
                ]
            }
        },
        "required": ["my_text", "my_date", "my_single_select"]
    },
    "data": {
        "my_text": "",
        "my_date": "",
        "my_single_select": "",
        "my_multi_select" : []
    }
}

Теперь проблема в том, что он не захватывает событие изменения данных в файле метода form-group.functions.ts только для этого элемента "my_multi_select".Для остальных трех элементов любое изменение получает обратный вызов, а значения фиксируются.Я отладил здесь ниже json-schema.form.services.ts , где все элементы управления регистрируются для подписки.В моих 4 элементах multi-select имеет тип "FormArray", а остальные - "FormControl".

buildFormGroup() {
    this.formGroup = <FormGroup>buildFormGroup(this.formGroupTemplate);
    if (this.formGroup) {
      this.compileAjvSchema();
      this.validateData(this.formGroup.value);

      // Set up observables to emit data and validation info when form data changes
      if (this.formValueSubscription) { this.formValueSubscription.unsubscribe(); }
      this.formValueSubscription = this.formGroup.valueChanges
        .subscribe(formValue => this.validateData(formValue));
    }
  }

Существует ли известная ошибка с подпиской типа FormArray или источником событий?

Я также пытался использовать ViewChild, чтобы получить значения, но я все еще получаю только значения других, кроме этого Multi-Select.Я до сих пор не понимаю, что в пользовательском интерфейсе, когда я выбираю несколько значений, он все еще отображается там, что означает, что он хранится где-то (может быть в controlValue), но почему нет способа получить доступ к этому значению (без события onchange)?

<json-schema-form #myJsonSchema
                          loadExternalAssets="true"
                          [schema]="formData?.schema"
                          [form]="formData?.form"
                          framework="material-design"
                          [widgets]="myCustomWidgets"
                          (isValid)="isFormValid($event)"
                          (onChanges)="onFormChange($event)"
                          (onSubmit)="onFormSubmit($event)">
        </json-schema-form>
...