Formly を使用して動的フォームをレンダリングしています。レンダリングされたドキュメントにはいくつかの段落があり、各段落をクリックすると、新しい正式なフォームをレンダリングしたいと考えています。3 つの段落のフォーム構成はまったく同じです。3 つの段落ごとに一意の値を収集したいだけです。
私はこのように形を整えます
<form [formGroup]="form" (ngSubmit)="onSubmit()" [style.maxHeight]="formMaxHeight" class="annotation-form border-top">
<formly-form
#formlyForm
[form]="form"
[fields]="modifiedFormlyConfig"
[model]="formlyModel"
(modelChange)="onModelChange($event)"
></formly-form>
</form>
テンプレートに付随するAngularファイルの関連部分を以下に示します
export class DocumentFormSidebarComponent implements OnInit, OnChanges, AfterViewChecked {
form: FormGroup = new FormGroup({});
@Input() formlyConfig: FormlyFieldConfig[];
@Input() formlyModel: any = {};
constructor(private changeRef: ChangeDetectorRef) {}
ngOnInit() {
this.form.markAsUntouched();
}
onSubmit() {
this.handleSubmit.emit();
this.formStatusChange.emit(this.form.valid);
}
ngOnChanges(changes: SimpleChanges) {
if (changes.formlyModel) {
console.log(this.formlyModel);
console.log({formControl: this.form.controls});
}
}
}
最初の段落をクリックすると、次の 2 つのコンソール ログが表示されます。
{
"g1": {
"key2": [{
"highlightGuid": "e119ddd6-1487-4579-ade7-4ccff760a7ea",
"highlightType": "TEXT",
"elementId": "paragraph-0",
"entityId": "0",
"content": "Ut morbi",
"contentType": "TEXT",
"range": {
"start": 525,
"end": 533,
"startXPath": null,
"endXPath": null
},
"sortOrder": 0.3841145833333333,
"isInitial": false,
"isEvidence": false,
"configId": null,
"comment": "",
"hidden": false
}],
"key1-evidence": [{
"highlightGuid": "261d0890-eebd-40cc-9597-21ab7a5d47b0",
"highlightType": "TEXT",
"elementId": "paragraph-0",
"entityId": "",
"content": "ortor v",
"contentType": "TEXT",
"range": {
"start": 242,
"end": 249,
"startXPath": null,
"endXPath": null
},
"sortOrder": 0.13411458333333334,
"isInitial": false,
"isEvidence": true,
"configId": null,
"comment": "",
"hidden": false
}],
"key1": "Para 0"
}
}
の対応する値をform.control.g1.value
以下に示します。
{
"key1": "Para 0",
"key1-evidence": [
{
"range": {
"start": 242,
"end": 249
},
"content": "ortor v",
"comment": "",
"hidden": false,
"highlightGuid": "261d0890-eebd-40cc-9597-21ab7a5d47b0",
"color": null,
"lock": null,
"sortOrder": 0.13411458333333334
}
],
"key2": [
{
"range": {
"start": 525,
"end": 533
},
"content": "Ut morbi",
"comment": "",
"hidden": false,
"highlightGuid": "e119ddd6-1487-4579-ade7-4ccff760a7ea",
"color": null,
"lock": null,
"sortOrder": 0.3841145833333333,
"entityId": "0"
}
]
}
これは予想通りです。ただし、2 番目の段落に切り替えると、以前のモデルは
{ }
ただし、対応する form.control.g1.value の値は
{
"key1": undefined,
"key1-evidence": [
{
"range": {
"start": 242,
"end": 249
},
"content": "ortor v",
"comment": "",
"hidden": false,
"highlightGuid": "261d0890-eebd-40cc-9597-21ab7a5d47b0",
"color": null,
"lock": null,
"sortOrder": 0.13411458333333334
}
],
"key2": [
{
"range": {
"start": 525,
"end": 533
},
"content": "Ut morbi",
"comment": "",
"hidden": false,
"highlightGuid": "e119ddd6-1487-4579-ade7-4ccff760a7ea",
"color": null,
"lock": null,
"sortOrder": 0.3841145833333333,
"entityId": "0"
}
]
}
そのため、key1 はリセットされますが、他の 2 つのフィールドはリセットされません。
これをデバッグする方法を教えてください。迷っています。