0

我正在使用 formly 来呈现动态表单。我呈现的文档有几个段落，单击每个段落时，我想呈现一个新的正式表单。三个段落的表单配置是完全一样的，我只是想为三个段落中的每一个收集唯一的值。

我因此呈现正式的形式

  <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});
        }
    }

}

单击第一段时，我有以下两个控制台日志。

{
    "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"
        }
    ]
}

这正如预期的那样。但是，当我切换到第二段时，我正式的模型是

{ }

但是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 确实被重置，但其他两个字段没有被重置。

有人可以指导我如何进行调试吗？我搞不清楚了。

4

0 回答 0