OrchardCore 1.7.2 workflow with Angular

Question

I am using angular and orchard 1.7.2 I have some issue connecting the workflow with Angular I tried every thing and end up with create forms dynamically using GraphQL

WorkFlow

Http Request Event

Contact

Message

Angular Form

Role permissions

Angular

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

  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) {
        console.log(widget.displayText)
        this.form.addControl(widget.displayText, new FormControl(''));
       }
      });
    }
  }

  onSubmit() {
    // Handle form submission
    this.AddNewData(this.form.value)
   .subscribe({
    next: (response:any) => {
       console.log("success")
  },
    error: (err: HttpErrorResponse) => {
     console.log(err.message)
    }}) 
  }
 
  AddNewData(model:any){
    //code?
   }
}

<div class="container px-5">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div class="row" *ngFor="let field of formModel;let index=index">
            <div class="col" *ngIf="field.contentType=='Input' ||field.contentType=='TextArea'">
                <label for="{{field.displayText}}">{{field.displayText }}</label>
                <input [id]="field.displayText" type="{{field.contentType}}" formControlName="{{field.displayText}}" class="form-control">
            </div>

        </div>

        <button type="submit" name="Submit">Submit</button>
    </form>
    {{this.form.value | json}}
</div>

How can i send the json after submit to workflow of orchardcore cms in angular ?

Answer 1

I have finally resolved the issue using 'Content-Type': 'application/x-www-form-urlencoded'

 AddNewData(model:any){
 let body = new URLSearchParams();
body.set('Name', model.Name);
body.set('Message', model.Message);
let headers=new HttpHeaders({
'Content-Type': 'application/x-www-form-urlencoded'
})
let options = {
 headers: headers};
return this.http.post('https://localhost:44300/workflows/Invoke?token=CfDJ8LfQICT3_mlMlo_R6ydeZoJG3OQpyltjCOXs_yioST1N0D7Xutg6zxT9Yd2ik5SNsMCubRphxlqo1i4grpSRVpw9INEZiDTA8vlYn4Ypjf47cdnV53HoTUkojfDH5KRfqDfGmTuNG4h8VWFYqfChRmnQH5cxIT5v6N_VEMPYizM__NMU3rHj1_eraiVTp2umfmOYW8IE3ekS6Z-VqidwoSO_yXgHLlQ8f6iH1izTeJ_U',body,options)
.subscribe({
  next: (response:any) => {
     console.log("success")
},
  error: (err: HttpErrorResponse) => {
   console.log(err.message)
  }}) ;