0

环境

  • 托管类型

    • [] 表单.io
    • [x] 本地部署

  • Formio.js 版本：- 版本：4.9.26

  • 前端框架：Angular 8+

  • 浏览器：铬

  • 浏览器版本：版本 83.0.4103.116（官方构建）（64 位）

预期行为

支持表单值的组（集体）设置defaultValue。就像单个表单组件defaultValue设置一样`

观察到的行为

neither `this.tempFormContent.defaultValue =  formSavedData`

也不 this.tempFormContent.defaultValues = formSavedData行

这是否没有记录或不受支持？

例子

<mat-formio [form]="projectFormContent" (submit)="onSubmit($event)"></mat-formio>

单独设置为默认值工作正常：

protected tempFormContent:any = {
    "components": [
      {
        "label": "How do YOU define 1",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key1",
        "type": "textarea",
        "input": true,
        "defaultValue": defValuekey1Saved,
        description: "...."
      },
      {
        "label": "How do YOU define 2",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key2",
        "type": "textarea",
        "input": true,
        "defaultValue": defValuekey2Saved,
        description: "...."
      },
      {
        "type": "button",
        "label": "Save and Next",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "validate": {
            "unique": false,
            "multiple": false
        }
      }
    ]
  };

//returning the value used in the HTML template
public get projectFormContent():any {
    return this.tempFormContent;

但是是否有一些组默认设置，我已经尝试过了，但没有工作：

protected tempFormContent:any = {
    "components": [
      {
        "label": "How do YOU define 1",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key1",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey1Saved,
        description: "...."
      },
      {
        "label": "How do YOU define 2",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key2",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey2Saved,
        description: "...."
      },
      {
        "type": "button",
        "label": "Save and Next",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "validate": {
            "unique": false,
            "multiple": false
        }
      }
    ]
  };

//returning the value used in the HTML template
public get projectFormContent():any {
    this.tempFormContent.defaultValue =  {'defValuekey1':defValuekey1Saved, 'defValuekey2':defValuekey2Saved};
   // this neither works:
   // this.tempFormContent.defaultValues =  {'defValuekey1':defValuekey1Saved, 'defValuekey2':defValuekey2Saved};
    return this.tempFormContent;
4

1 回答 1

0

所以，我已经找到了一个解决方案，直到 Formio 原生支持一堆人口：

<mat-formio [form]="formContent" (submit)="onSubmit($event)"></mat-formio>

和代码：

protected _formContent:any = {
    "components": [
      {
        "label": "How do YOU define 1",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key1",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey1Saved,
        description: "...."
      },
      {
        "label": "How do YOU define 2",
        "spellcheck": true,
        "tableView": true,
        "validate": {
            "unique": false,
            "multiple": false
        },
        "key": "key2",
        "type": "textarea",
        "input": true,
        // "defaultValue": defValuekey2Saved,
        description: "...."
      },
      {
        "type": "button",
        "label": "Save and Next",
        "key": "submit",
        "disableOnInvalid": true,
        "input": true,
        "tableView": false,
        "validate": {
            "unique": false,
            "multiple": false
        }
      }
    ]
  };

  public get formContent():any {
    if(this.mLShareService.projectInfo.get(PHASE_NAME)){ // populating form with its previously saved values:
      const savedForm:any = this.mLShareService.projectInfo.get(PHASE_NAME); //gets the previously saved form from the external service
      for (let index = 0; index < this._formContent.components.length; index++) {
        const component:any = this._formContent.components[index];
        const componentKey:string = component['key'];
        const componentType:string = (component['type'] as string).toLocaleLowerCase();

        if( //avoids non-dynamic (non-filled) elements
          componentType === 'button' || // a button
          componentType === 'content')  // plain text and not an input field
        { continue;}
        if(savedForm[componentKey]){
          component.defaultValue = savedForm[componentKey];
        }
      }
    }

    return this._formContent;
  }

需要时，可以通过检查类型（例如）并递归调用方法来提供深度填充（如果表单包含面板）。type: "panel"

于 2020-07-15T09:54:53.943 回答