hamzahamidi / ajsf

Angular JSON Schema Form
https://hamzahamidi.github.io/ajsf
MIT License
358 stars 182 forks source link

validationErrors: submit is enabled even if function return false #319

Open enriquez73 opened 2 years ago

enriquez73 commented 2 years ago

I've implemented a function that verify validity of other forms in page, if the form generated from JSONSchema is valid the Submit button is enabled even if other forms are invalid (the function returns false)

which template:

To Reproduce

<json-schema-form #schema_form loadExternalAssets="true" [schema]="jsonSchema" language="it"
                framework="material-design" [layout]="formLayout" (onSubmit)="submitForm($event)" [widgets]="myWidgets"
                [options]="exampleJsonObject" (isValid)="validFormFn($event)"
                (validationErrors)="validationErrorsFn($event)" [debug]="false">

   </json-schema-form>
validationErrorsFn(event: any): boolean {
    const docFormArray = this.form.get('documentsForm') as FormArray;
    let validDocs = true;
    if (docFormArray) {
      validDocs = docFormArray.valid || false;
    }
    let eventValid = true;
    this.jsonFormError = [];
    if (event && typeof event === 'object') {
      eventValid = false;

      event.forEach((x: any) => {
        this.jsonFormError.push(`${x.keyword} - ${x.message}`);
      });
    }

    const validForm = validDocs && this.privacyOk && eventValid;
    this.validForm = validForm;

    console.log('validForm: ', validForm);

    return validForm;
  }
  validFormFn($event) {
    console.log('Called validFormFn from: ', $event.toString());
    return this.validForm;
  }

Expected behavior The submit button is disabled

Screenshots

2022-04-07_15-01

Desktop

sh1nryu commented 5 months ago

hey, I noticed you have tagged your element with #schema_form - I'm wondering are you accessing the form component in your parent component's ts file? if so, how? (I'm trying and failing to!) Thank you