jsonangularangular6-json-schema-form

Can't clear the angular-json-schema-form after submitting


I'm building a form using json-schema-form and am using this library. https://www.npmjs.com/package/angular6-json-schema-form

This looks great but I have one problem. After submitting, I want to clear the form, but it's impossible.

I couldn't find out the method in the document, and also searched the stackoverflow and googled, but got no solution. So I cleared the form using Javascript after submitting, but the form data seems to be saved somewhere, so it's possible to resubmitting without any action.

Here is the code

<json-schema-form
     *ngIf="isInquireForm"
     class="contact-form"
     loadExternalAssets="true"
     framework="no-framework"
     [options]="inquireFormOption"
     [schema]="inquireFormSchema"
     [form]="inquireFormLayout"
     (onSubmit)="onInquireSubmit($event)"
     (isValid)="inquireIsValidFn($event)"
     (validationErrors)="inquireValidationErrorsFn($event)">
</json-schema-form>

Solution

  • You need to create an object to populate the form with default values and bind it to the json schema form component. When you need to reset, clear the data in the object.

    data = {
       first_name: "abc",
       last_name: "xyz"
    }
    
    <json-schema-form
         *ngIf="isInquireForm"
         class="contact-form"
         loadExternalAssets="true"
         framework="no-framework"
         [options]="inquireFormOption"
         [schema]="inquireFormSchema"
         [form]="inquireFormLayout"
         [(data)]="data"
         (onSubmit)="onInquireSubmit($event)"
         (isValid)="inquireIsValidFn($event)"
         (validationErrors)="inquireValidationErrorsFn($event)">
    </json-schema-form>
    

    And to clear the form, reset data

    data = {
       first_name: "",
       last_name: ""
    }