nevoss / form-wrapper-js Goto Github PK

I am trying to edit the items of a project, but when I try to enter the values of my existing project in the form instance I lose the validation rules...

<script>
    import {Form} from 'form-wrapper-js'
    import {required} from '../../../support/form/validation'

    export default {
        name: 'UpdateProjectModal',
        props: ['project'],
        data() {
            return {
                form: Form.create({
                    name: {
                        value: null,
                        rules: [required('É necessário informar um nome')]
                    }
                })
            }
        },
        created() {
            this.form.$addFields(JSON.parse(JSON.stringify(this.project)))
        }
    }
</script>

Also getting this warning: Form-wrapper-js warn]: 'name' is already exists

How can I solve this?

I achieved the desired result with the following:

created() {
    this.form.name = this.project.name
    this.form.description = this.project.description
}

But there are other models with more than 30 fields... And the fields should be dynamic...

Another solution I have found is the following:

data() {
    return {
        form: Form.create({
            name: {
                value: this.project.name,
                rules: [required('É necessário informar um nome')]
            },
            description: {
                value: this.project.description
            }
        }),
        waitingResponse: false
    }
}

Is this right?

must writing some docs to the library!

For now, there is no way to add and remove fields from the form, and we are stuck with the fields that were generated in the constructor.

The idea is to add new methods that will help dynamically add and remove fields from the form.

e.g:

const form = new Form()

form.$addField('name', null)
form.$addFields({
  name: null,
  last_name: {
    value: null,
    rules: [required]
  } 
})

form.$removeField('name')
form.$removeFileds(['name', 'last_name'])

In order to achieve version 1, there is a need to improve the build flow of the library.

• Change the flow of rollup - first, compile typescript to Js and then build with rollup.
• Add TS lint or something similar to the CI and to the build flow.
• Write some description to the library in the head of the main index file.
• Update all the dev dependencies of the library.
• Adding Github MD files.

The idea is to let users return Promise in the validation function ("passes" function).

Then field can be validate throw api end point.

Maybe set some prop that hold the currently validating fields.

Sometimes there is a constraint to create a collection of Forms, you have a group of fields that can be duplicate certain of time.

An example of that is a 'phone' collection, a user can have more than one phone number, one can be mobile and one can be a work phone.

const form = new Form({
  first_name: null,
  last_name: null,
  phones: new FormCollection({
    type: "mobile",
    number: null
  })
});

The new class FormCollection is actually a collection of forms, the object that passes to the constructor of the FormCollection is the same object that passes to the Form class, the only difference is that the object is a prototype, this is mean that the FormCollection holds an array of forms and every time we call the function form.phones.add(), it will add a new Form to the collection of forms, the new Form that will be created will be constructed with the prototype fields

form.phones.add()
forms.all()[0].$fill({
  type: 'mobile',
  number: '0000000'
})

form.phones.add()
forms.all()[1].$fill({
  type: 'work',
  number: '9999999'
})

This code will create two Forms, those 2 forms use the fill function like normal forms, of course, we can make a for loop in our framework template engine and bind events that will fill those forms.

When we call form.$values() the return object will look like this:

{
  first_name: null,
  last_name: null,
  phones: [
    {
      type: 'mobile',
      number: '0000000'
    },
    {
      type: 'work',
      number: '9999999'
    },
  ]
}

This is a nice and clean way to send it to our backend

need to add a "touched" property to the Form class.
the property maybe will be a class that manages all the touched fields, along with an API that helps to add to the touched fields, removing and more

Seems like the rules property not working when set in the constructor of Form class.
when trying to validate field the rules of the field not running and not trying to validate.

setting up the option to debounce validation in fieldChnaged method.

this is a preparation for the promise base validation related to #28, that's because promise base validation can take time and we don't want to validate every input event.

For now there is 2 hook function "successfullSubmissionHook" and "unSuccessfullSubmissionHook".
the idea is to remove those methods and create something like "interceptors" like axios has.
then could be more than one hook and the user can catch and change the chain of the promises

Need to add a new property that saves the field key of the input on focus right now,
and also add some API methods, so the property can be manageable like "setOnFocus" and "unsetOnFocus", and maybe think about other staff, that should help manage the "onFocus" property.

when adding a field to the $touched array, it doesn't check if the field already exists in the array.

I have a small problem when submitting a form that has an array. First I sent the form without being filled, then I filled it out and tried to send it again. The values service_id and currency are filled in correctly, however resending is not allowed due to the array.

This is my form:

form: Form.create({
    service_id: null,
    currency: null,
    costs: [
		{
			value: null,
			starting_track: null,
			final_track: null
		},
		...
	]
})

These are the errors returned from my API:

{
   "message":"The given data was invalid.",
   "errors":{
      "service_id":[
         "The service id field is required."
      ],
      "currency":[
         "The currency field is required."
      ],
      "costs.0.value":[
         "The costs.0.value field is required."
      ],
      "costs.0.starting_track":[
         "The costs.0.starting_track field is required."
      ],
      "costs.0.final_track":[
         "The costs.0.final_track field is required."
      ]
   }
}

This is the error returned by the package:

Somehow, he doesn't recognize that the inputs costs.0.final_track, costs.0.starting_track and costs.0.value have been filled.

How can I get around this situation?

This is very confusing the reset method on the Form class is just set all the fields data to the original data that was sent into the constructor, this method should reset also the $dirty and the $errors.

need to find another name to the reset method, and create a new method for the "data reset", also maybe change the name of the data and originalData properties to values and initialValues

Hey,
I am a very bad designer, so if someone can help me create a nice logo for the library it will be great 😄 .

You can use any colors you like if the logo will be fit for the library I will change the colors of the site to the logo colors.

right now the library not throwing or logging in the console any warn error.

1. need to create a warning function or use an existing one
2. scan the code to add some warning (etc: "field key doesn't exist.")