How to submit Angular 5 forms to database through HTTP post?

Question

I am creating a completely new object through the Angular 5 reactive forms, when it has been filled up. The forms however, do not have any id elements. The question is, when i click submit, I get the form.value. When i console.log it, i can see the JavaScript object of form.value. How do i submit this to a web API? The JavaScript object does not have any id too.

Please provide suggestions or the methodology in doing so.

I am using the new HTTP Client module.

Thank you.

Here are my source codes:

.ts

  CheckListForm: FormGroup;

  Ques: Questions[];

  Questions: any = [];

  employmenttype = ['Permanent', 'contractor'];



  constructor(private fb: FormBuilder,
          private checklistservice: ChecklistService) { 
          this.CreateForm();

                                                       }

  ngOnInit() {

  this.checklistservice.getQuestions(1).subscribe(res =>{ this.Ques = res;
  this.addQuestions();
             }); 








 CreateForm() {
 this.CheckListForm = this.fb.group({

 name: ['', Validators.required],
 EmploymentType: ['', Validators.required],
 HRMS: [''],
 CompanyName:[''],
 questions: this.fb.array([]) 
              })
             }


get questions(): FormArray {
return this.CheckListForm.get('questions') as FormArray;
                           }


addQuestions () {

  for (let Que of this.Ques) {
    this.questions.push(
      new FormGroup ({
        'ques': new FormControl(Que.ques),
        'choices': new FormControl('', Validators.required)
      })
    )
  }
}


onSubmit() {
  console.log(this.CheckListForm.value);
           }
         }

And here is my console.log(this.checklistform.value) results:

You need to iterate through the javascript object and take the values of the controls that you want to use. Its really hard to answer a question when you don't share any of the code, console logs or anything else. Can you put some code and the console log of your form value? What is your POST request expecting? — Farasi78
– Farasi78, Commented May 11, 2018 at 9:09
I have added the codes for the reactive form controls, together with the json object. As you can see, the json object contains an array questions, with 2 form controls, ques and choices. — sanmatrix
– sanmatrix, Commented May 11, 2018 at 9:25

Mulperi · Accepted Answer · 2018-05-11 13:42:53Z

1

You can generate the id in the API before it writes to database. Or you can create the id in service and add it to the POST request body before posting to API.

So it would be something along these lines in the service:

addItemsToDB(arrayOfObjects) {
    let array = arrayOfObjects;
    array.forEach(object => {
        object.id = uuid();
    });
    return this.http.post(this.databaseURL, array);
}

First install uuid (https://www.npmjs.com/package/uuid) via npm

npm i uuid

Then import it like this

import { v4 as uuid } from 'uuid';

Then you can generate uuids with just calling uuid(); More info about what is an uuid: https://en.wikipedia.org/wiki/Universally_unique_identifier

I hope this helps! :)

edited May 11, 2018 at 13:42

answered May 11, 2018 at 9:22

Mulperi

1,4512 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sanmatrix Over a year ago

Thank you for the response. But the method uuid(); how does it generate an id. Could you kindly explain further? How to ensure the id does not conflict with an existing id record in the database?

sanmatrix Over a year ago

Thank you so much for the response. I will try this awesome feature out!

sanmatrix Over a year ago

Hi sorry, just one more question, how do i add the ids for the array objects ?

Mulperi Over a year ago

Edited answer again :) Not sure if this is what you are really looking for, but if the API can work with arrays, then this should work.

sanmatrix Over a year ago

dude, you are a life saver if this works. I will carry out the codes and see if it works. I will keep you posted also for learning purposes. Thanks for sharing this awesome uuid

|

Collectives™ on Stack Overflow

How to submit Angular 5 forms to database through HTTP post?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related