how to convert data in a string using json in angular

Question

I do not know exactly how I can bind my form data in JSON string. in my scenario, I use a string field in the database and have some checkbox fields that I have to save in only a single database column using JSON. for that, I created an HTML form, and I don't know how I can bind all data in a database. if someone knows then can guide me

documentList: [
          {
            'IsSpecifications': false,
            'IsSpecificationscomment': ''
          },
          {
            'IsDrawSchedule': false,
            'IsDrawSchedulecomment': ''
          },
          {
            'TqRfi': false,
            'TqRficomment': ''
          },
          {
            'InsEnqReqQouInfor': false,
            'InsEnqReqQouInforcomment': ''
          },
          {
            'PanEnqReqQouInfor': false,
            'PanEnqReqQouInforcomment': ''
          },
          {
            'PanSubContQuot': false,
            'PanSubContQuotcomment': ''
          },
          {
            'MccSchedule': false,
            'MccScheduleComment': ''
          },
          {
            'ScPackQuot': false,
            'ScPackQuotComment': ''
          },
          {
            'O3rdPartyQuot': false,
            'O3rdPartyQuotcomment': ''
          },
          {
            'EquipSchedule': false,
            'EquipScheduleComment': ''
          },
          {
            'PointSchedul': false,
            'PointSchedulComment': ''
          },
          {
            'ValveSchedul': false,
            'ValveSchedulComment': ''
          },
          {
            'IdentRiskOpport': false,
            'IdentRiskOpportComment': ''
          },
          {
            'InstSubContQuot': false,
            'InstSubContQuotComment': ''
          }
        ];

<div class="my-3">
                        <ejs-checkbox label="isSpecifications()" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Drawings/Schedules" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="TQ’s / RFI’s" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox
                            label="Install Enquiry / request to quote information"
                            labelPosition="Before"
                        ></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox
                            label="Panel Enquiry / request to quote information"
                            labelPosition="Before"
                        ></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Panel Sub Contractor Quotation" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="MCC Schedules" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Other S/C Package Quotations" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Other 3rd Party Quotations" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Equipment Schedules" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Points Schedules" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Valve Schedules" labelPosition="Before"></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox
                            label="Identifed Risks and Opportunities (INCL. VALUE ENGINEERING)"
                            labelPosition="Before"
                        ></ejs-checkbox>
                    </div>
                    <div class="my-3">
                        <ejs-checkbox label="Install Sub Contractor Quotation" labelPosition="Before"></ejs-checkbox>
                    </div>

in the database, I use documentlist field in that all my checkbox values save in JSON string.

Answer 1

I think what are you searching for is JSON.parse()

See documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse?retiredLocale=it

Answer 2

Stackblitz

Main purpose of this answer is to provide the stackblitz. This is not a tutorial.

To fully understand the code requires learning:

• Angular Reactive Forms (form group, form array etc.) - see https://angular.io/guide/reactive-forms
• Some RxJS (delay, takeUntil(this.destroyed$) etc.) - see https://angular.io/guide/rx-library
• Control Value Accessor (writeValue etc.) - a previous SO answer I gave or https://www.youtube.com/watch?v=kVbLSN0AW-Y

Note instead of Control Value Accessor you could pass in a form group as an input. This is partly a matter of preference.

Overview

Implementing the control value accessor on custom component ejs-checkbox means we can bind it via

<ejs-checkbox formControlName="{{ i }}"></ejs-checkbox>

and any changes will be reflected in the overall form group.

Make some changes to form and watch the valueChanges console logs to see this.

I've used a form array for the document list. This allows the size of the array to change. If this will not change you could replace with form controls.

I've provided an exampleSave() that converts the form group value to match your documentList. You could JSON.stringify this and send to server as described in your question.