如何在Angular中将提交后的JSON发送至OrchardCore 1.7.2工作流？

前提确认 #

你已通过GraphQL实现动态表单渲染，接下来只需通过HTTP请求触发工作流即可完成数据提交，结合现有代码按以下步骤修改：

1. 确认OrchardCore工作流的HTTP触发配置 #

确保工作流中的Http Request Event已正确设置：

• 请求方法选择POST
• 自定义触发路径（比如/api/workflows/trigger/contact-form）
• 开启接收JSON格式请求体
• 后续工作流步骤可通过Request.Body变量读取提交的表单数据（用于保存到Content Type或其他业务处理）

2. 修改Angular组件代码 #

完善AddNewData方法，添加HTTP请求逻辑，同时处理OrchardCore默认启用的CSRF保护：

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Apollo, gql } from 'apollo-angular';

@Component({
  selector: 'app-forms',
  templateUrl: './forms.component.html',
  styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {

  formModel: any;
  form = new FormGroup({});
  // 替换为你工作流的实际触发端点
  private workflowTriggerUrl = '/api/workflows/trigger/contact-form';

  constructor(private apollo: Apollo, private http: HttpClient) {}

  ngOnInit() {
    this.apollo.watchQuery({
      query: gql`
      query MyQuery {
        contact {
          flow {
            widgets {
              contentType
              ... on Form {
                displayText
                form {
                  method
                  action
                }
                flow {
                  widgets {
                    contentType
                    displayText
                    ... on Input {
                      displayText
                      input {
                        placeholder
                      }
                    }
                    ... on TextArea {
                      displayText
                      textArea {
                        placeholder
                      }
                    }
                    ... on Button {
                      displayText
                    }
                  }
                }
              }
            }
          }
        }
      }
      `
    }).valueChanges.subscribe((result: any) => {
      const formss = result.data.contact;
      const flow = formss[0].flow;
      const widgets = flow.widgets;
      this.formModel = widgets[0].flow.widgets;  
      for (const widget of this.formModel) {
        this.form.addControl(widget.displayText, new FormControl(''));
      }
    });
  }

  onSubmit() {
    this.AddNewData(this.form.value)
      .subscribe({
        next: (response: any) => {
          console.log("表单提交成功，工作流已触发");
        },
        error: (err: HttpErrorResponse) => {
          console.error("提交失败：", err.message);
        }
      }); 
  }
 
  AddNewData(model: any) {
    return this.http.post(this.workflowTriggerUrl, model, {
      headers: {
        'X-CSRF-Token': this.getCsrfToken(),
        'Content-Type': 'application/json'
      }
    });
  }

  // 从页面meta标签获取OrchardCore生成的CSRF令牌
  private getCsrfToken(): string {
    const metaTag = document.querySelector('meta[name="X-CSRF-Token"]');
    return metaTag ? (metaTag as HTMLMetaElement).content : '';
  }
}

3. 修正Angular模板的表单渲染 #

原模板中用input标签渲染TextArea的方式错误，修改为正确的标签结构：

<div class="container px-5">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div class="row" *ngFor="let field of formModel; let index=index">
            <!-- 渲染输入框 -->
            <div class="col mb-3" *ngIf="field.contentType=='Input'">
                <label for="{{field.displayText}}" class="form-label">{{field.displayText }}</label>
                <input 
                    [id]="field.displayText" 
                    type="text" 
                    formControlName="{{field.displayText}}" 
                    class="form-control"
                    [placeholder]="field.input?.placeholder">
            </div>
            <!-- 渲染文本域 -->
            <div class="col mb-3" *ngIf="field.contentType=='TextArea'">
                <label for="{{field.displayText}}" class="form-label">{{field.displayText }}</label>
                <textarea 
                    [id]="field.displayText" 
                    formControlName="{{field.displayText}}" 
                    class="form-control"
                    rows="3"
                    [placeholder]="field.textArea?.placeholder"></textarea>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <div class="mt-3">
        表单数据预览：{{this.form.value | json}}
    </div>
</div>

4. 跨域问题处理（Angular与OrchardCore不同域名/端口时） #

如果Angular运行在http://localhost:4200，OrchardCore在其他端口，需在OrchardCore中配置CORS：

1. 启用OrchardCore的Cors模块
2. 在appsettings.json中添加配置：

"OrchardCore_Cors": {
  "AllowOrigins": "http://localhost:4200",
  "AllowMethods": "POST,OPTIONS",
  "AllowHeaders": "Content-Type,X-CSRF-Token"
}

内容的提问来源于stack exchange，提问作者Mutaz Obeidat