form builder angular 2 - 如何构造控件数组？

Posted 2023-03-13

【中文标题】form builder angular 2 - 如何构造控件数组？

【英文标题】：form builder angular 2 - How to construct an array of controls?

【发布时间】：2016-10-16 14:55:27

【问题描述】：

我正在尝试创建一个表单构建器以从中生成特定的 JSON 格式主体以将其放在服务器上，我遇到的问题是如何表示我的代码中指示的任务数组，这里是我的格式生成器：

    this.form = fb.group(          
               Action: fb.group(
                label: [],
                actionType: [],
                description: [],
                HTTPMethod: [],
                ressourcePattern: [],
                status: [],
                parameters: [],
                linkedprocess: fb.group(
                process: fb.group(
                    label: []
                ),
                /////////////////////
                associatedTasks:[],     // => here i want to represent the associated tasks
                    task: fb.group(   // it's an array of task 
                        label:[]
                    )
                /////////////////////
               ),
                labelParam: [],
                descriptionParam: []
               )
            );
    

这是我想从表单中获取的 json 格式：

    "Action":       
             "label": "A7791",
             "HTTPMethod": "POST",
             "actionType": "indexation",
             "status": "active",
             "description": "descroption new",
             "resourcePattern": "",
             "creationDate": "30-05-2016 06:14:09",
             "modificationDate": "13-06-2016 11:51:10",
             "parameters": [],
             "linkedProcess": "Process": "label": "P1",
             "associatedTasks": ["Task": "label": "T1"]
          
    

它不是这样工作的：

    associatedTasks:[
                  task: fb.group(
                    label:[]
                )
    ]

我已经测试过 Daniel 解决方案，它很酷，但它没有绑定到我的模板，这是我的 html：

`

<div class="form-group" >
    <label for="Task">associatedTasks</label>
    <select
        ngControl="Task" #frequency="ngForm" 
        id="Task" class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="#taske of associatedTaskss" value=" taske.id " >
            taske.label
        </option>
    </select> 
 `

我收到错误（在 [Task in ] 中找不到控件“任务”）

请注意， associatedTaskss 是我从服务器获取的任务列表（现在只是像这样测试它：

`
 associatedTaskss=[
        id :1, label:'T1',
        id :2, label:'T2',
        id :3, label:'T3',
        id :4, label:'T4'
    ];
` 

这是我放在服务器上的 JSON 格式（预填充了一些数据的示例）

`

"Action": 
          "label": "A1",
          "HTTPMethod": "POST",
          "actionType": "indexation",
          "status": "active",
          "description": "Ajout d'une transcription dans le lac de données",
          "resourcePattern": "transcriptions/",
          "parameters": [
            
              "Parameter": 
                "label": "",
                "description": "Flux JSON à indexer",
                "identifier": "2",
                "parameterType": "body",
                "dataType": "json",
                "requestType": "Action",
                "processParameter": 
                  "label": "",
                  "description": "Flux JSON à indexer",
                  "identifier": "4",
                  "parameterType": "body",
                  "dataType": "json",
                  "requestType": "Process"
                
              
            ,
            
              "Parameter": 
                "label": "collection",
                "description": "Identifiant d'une collection dans la base de données orientée document",
                "identifier": "10",
                "parameterType": "URI",
                "dataType": "string",
                "defaultValue": "transcriptions",
                "requestType": "Action",
                "processParameter": 
                  "label": "collection",
                  "description": "Identifiant d'une collection dans la base de données orientée document",
                  "identifier": "1",
                  "parameterType": "URI",
                  "dataType": "string",
                  "requestType": "Process"
                
              
            
          ],
          "linkedProcess": 
            "Process": 
              "label": "P1"
            
          ,
          "associatedTasks": [
            
              "Task": 
                "label": "T1"
              
            
          ]
        

`

【参考方案1】：

要在表单组中包含数组，您必须使用 FormBuilder.array() 函数。

这是你想要的吗？

this.form = _fb.group(
  Action: _fb.group(
    label: [],
    HTTPMehotd: [],
    actionType: [],
    status: [],
    description: [],
    resourcePattern: [],
    creationDate: [],
    modificationDate: [],
    parameters: _fb.array([]),
    linkedProcess: _fb.group(
      Process: _fb.group(
        'label': []
      )
    ),
    associatedTasks: _fb.array([
      _fb.group(
        Task: _fb.group(
          label: []
        )
      )  
    ])
  )
)

【讨论】：

谢谢你，这就是我想要的，我会测试它，我会给你反馈

让我看看我是否做对了。 associatedTasks 是一个 Tasks 数组id: number, label: string ?

好的。但是为什么你需要控制选项而不仅仅是选择呢？我不确定，但您不能将控件绑定到选项。这没有意义。您确定您了解 Angular 2 中控件的用法吗？

对不起，我不太明白你想说什么，但我的目标是绑定 associatedTasks 数组（模板中选项框中的所有任务）与我的格式生成器上的关联任务（获取所有字段并将其传递到服务器以使用这些参数添加操作）我将发布我试图放在服务器上的 json 格式（查找问题）

您好，我还没有阅读您的问题，但我想这会有所帮助，或者至少会给您一些见解。 scotch.io/tutorials/…