0

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 つのフィールドはリセットされません。

これをデバッグする方法を教えてください。迷っています。

4

0 に答える 0