Текущая реализация для множественного выбора не показывает <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>