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

CodePudding user response：

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

CodePudding user response：

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.