❤
npm
Sign UpSign In

formlyjs

1.0.1 • Public • Published

Formly

It will prevent default form submit, and it will get all the values of the form inputs tags, then get the method and action attributte values, and then send the request

Attributte Description Required Attribute Value
data-formlyjs-name This it is used on the <form data-formlyjs-name="login">...</form> X unique
data-formlyjs-res-type This it is used on the <form data-formlyjs-name="login" data-formlyjs-res-type="application/json">...</form> default: application/json, allowed: application/json
data-formlyjs-reset This it is used on the <form data-formlyjs-name="login" data-formlyjs-reset="true">...</form>, and if exists it will reset form values on success response default: false, allowed: true and false
data-formlyjs-error This it is used to display errors, it can be used inside or outside the form tags. Response must be {"errors": { "name": "Invalid Characters", "email": "Invalid Email Address"}}, are cleared on form submit name or name.first
data-formlyjs-success This it is used to display success messages, it can be used inside or outside the form tags. Response must be { "success": "User Updated" }, are cleared on form submit success or user.updated
data-formlyjs-res This it is used to persist data from response, it can be used inside or outside the form tags. Response must be { "followers": 92992 }, are cleared on form submit user.name.first
data-formlyjs-add This it is used to append data from response to an html element, it can be used inside or outside the form tags. Response must be { "followers": 92992 }, are cleared on form submit user.name.first
data-formlyjs-class-add It is used with data-formlyjs-error or data-formlyjs-success or data-formlyjs-add or data-formlyjs-res, it add classes to be added when a response is received , classes are removed on form submit border-b text-green-300
data-formlyjs-class-remove It is used with data-formlyjs-error or data-formlyjs-success or data-formlyjs-add or data-formlyjs-res, it remove classes to be removed when a response is received , classes are added on form submit border-b text-green-300
data-formlyjs-to It is used with data-formlyjs-error or data-formlyjs-success or data-formlyjs-add or data-formlyjs-res, it is used when user uses the previous attributtes outside the form tags, it is used to link the element to the form form-name
data-formlyjs-loading It can be used inside or outside the <form>...</form>, it is displayed when user submits any form on the page, it can be displayed only a certain form is submitted, for that the attributte must receive form name form-name
data-formlyjs-saving It can be used in input and button tags, type="submit", in the input tag this value it will replace the default input value, in the button tag it will replace the value of the element with attributte data-formlyjs-saving-default form-name
data-formlyjs-saving-default It can be used inside button tag form-name
data-formlyjs-type It can be used in <form data-formlyjs-type="toggler">...</form> tag, this is used like a toggle button, when a form it is submitted it will add the class on to the parent element of tag <form> allowed: toggler
data-formlyjs-close It is used to close a certain element, receives the #id of the element to be removed element-id
data-formlyjs-timeout It is used with data-formlyjs-res, data-formlyjs-error, data-formlyjs-success, data-formlyjs-add, if used, it will remove the classes from data-formlyjs-class-add and add the classes from data-formlyjs-class-remove. The value passe can be 100ms, 10s, 1m, 1h. mstime in milliseconds - stime in seconds - mtime in minutes - htime in hours data-formlyjs-timeout="55s"
data-formlyjs-atr It is used with data-formlyjs-res, data-formlyjs-error, data-formlyjs-success, data-formlyjs-add, it is used with, eg: ```data-formlyjs-success="username ra", it can receive multiple attribures seperated using (pipe), the number of key objects indata-formlyjs-success="username;somevalue;otherValue;

Responses

Reserved response keys

Response Description
{ "redirect": "/home" } If the success response contains, on root level, a key named redirect the user it will be redirected to the value of the key, using Turbolinks.visit(redirect), giving the felling of single page application

How to Use

  • To Use, only need to add attributte data-formlyjs-name to form tag, and must be unique on the page:
 <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="login" data-formlyjs-res-type="application/json">
     ...
 </form>

To get started:

  • Simple Form:
  <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
      @csrf
      @method('patch')
      <input type="text" name="name" value="{{ $user->name}}">
      <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-error="name">@error('name'){{ $message }}@enderror</p>

      <input type="text" name="username" value="{{ $user->username}}">
      <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-error="username">@error('username'){{ $message }}@enderror</p>

      <input type="text" name="email"  value="{{ $user->email }}">
      <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-error="email">@error('email'){{ $message }}@enderror</p>

      <input type="submit" data-formlyjs-saving="Saving..." value="Save">
      <button type="submit" data-formlyjs-saving="Saving...">
          <span data-formlyjs-saving-default>Save</span>
          {{-- <span class="hidden" data-formlyjs-loading>...</span> --}}
      </button>
  </form>

 

data-formlyjs-success , data-formlyjs-error , data-formlyjs-add

This attributtes can receive a value. We can do:

Example Description
```data-formlyjs-success="success show"```
```data-formlyjs-success="success inner"```
```data-formlyjs-res="avatar ra"```
data-formlyjs-success="success" This means we want to add the classes from data-formlyjs-class-add and remove from data-formlyjs-class-remove and replace the innerHTML from the current object, if the the key success exist in the reponse object

data-formlyjs-success , data-formlyjs-error , data-formlyjs-add, data-formlyjs-res

we can use an html element to be displayed in certain errors, just need to use ; to seperate object keys.

    <div class="@if (session('success')) success-alert @else hidden @endif"
        id="success-alert"
        data-formlyjs-to="update-user"
        data-formlyjs-success="success;username|show" 
        data-formlyjs-class-add="success-alert"
        data-formlyjs-class-remove="hidden"
        data-formlyjs-timeout="2s">
        <strong class="font-bold">Holy smokes!</strong>
        <span class="block sm:inline"
                data-formlyjs-to="update-user"
                data-formlyjs-success="success;username|inner">
            @if (session('success'))
                {{ session('success') }}
            @endif
        </span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3 cursor-pointer flex justify-center items-center" data-formlyjs-close="success-alert">
          <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </span>
    </div>

We can see in the example above, data-formlyjs-success="success;username|show", this means that it will be used if get a success reponse, and the response contains an object key "success" or "username"

Available Values

Option Description
show This means we just want to add the classes from data-formlyjs-class-add and remove from data-formlyjs-class-remove if the a certain key exists in the reponse object
inner This means we just want to replace the innerHTML from the current object if a certain key exists in the reponse object
ra This means we just want to replace the attributes specified in data-formlyjs-atr attributte from the current object if a certain key exists in the reponse object, eg: ```<div data-formlyjs-to="update-user data-formlyjs-res="username
Default This means we want to add the classes from data-formlyjs-class-add and remove from data-formlyjs-class-remove and replace the innerHTML from the current object, if the a certain key exist in the reponse object

Example of ra usage:

  • Upload Image

    <div class="flex items-center">
    <img class="w-8 h-8 rounded-full mr-4" data-formlyjs-to="upload-avatar" data-formlyjs-res="avatar|ra" data-formlyjs-atr="src" name="" src="{{ Auth::user()->avatarURL(['w' => 40, 'h' => 40, 'fit' => 'crop']) }}" alt="Avatar of Miguel">
</div>

  • Explanation:

    • We are saying that we want to replace the value of attributte src if we get a response from form upload-avatar with a key named avatar

  • Replace multiple attributes on current element

    • It is possible to replace multiple attributtes on the current object
    <div class="flex items-center">
    <img ... data-formlyjs-to="upload-avatar" data-formlyjs-res="avatar;username|ra" data-formlyjs-atr="src|alt" name="" src="someValue" alt="Avatar of Miguel">
</div>
    • Explanation:
      • We are saying that we want to replace the value of attributte src if we get a response from form upload-avatar with a key named avatar, and replace the value of attributte alt if we get a response from form upload-avatar with a key named username Example:
<div class="@if (session('success')) success-alert @else hidden @endif"
    id="success-alert"
    data-formlyjs-to="update-user"
    data-formlyjs-success="success|show" 
    data-formlyjs-class-add="success-alert"
    data-formlyjs-class-remove="hidden">
    <strong class="font-bold">Holy smokes!</strong>
    <span class="block sm:inline"
            data-formlyjs-to="update-user"
            data-formlyjs-success="success|inner">
        @if (session('success'))
            {{ session('success') }}
        @endif
    </span>
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3 cursor-pointer flex justify-center items-center" data-formlyjs-close="success-alert">
        <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
</div>

 

Attributes

  • data-formlyjs-res, it is used to get and persist the response. It can be used inside the form: 
    <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-res="name">@error('name'){{ $message }}@enderror</p>
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>
    Or Outside the form: 
    <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-to="update-user" data-formlyjs-res="name">@error('name'){{ $message }}@enderror</p>

<form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

 

  • data-formlyjs-error, it is used to get response errors, errors are cleaned in form submit, this is used to display form errors   Response Example: {"errors": { "name": "Invalid Characters", "email": "Invalid Email Address"}}   It can be used inside the form: 
    <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-error="name">@error('name'){{ $message }}@enderror</p>
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>
    Or Outside the form: 
    <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-to="update-user" data-formlyjs-error="name">@error('name'){{ $message }}@enderror</p>

<form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

 

  • data-formlyjs-success, it is used to get success response, this it is used to display success messages, this is used to display form errors   Response Example: { "success": "User Created" }   It can be used inside the form:

    <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    <p class="text-green-500 text-xs italic pt-2" data-formlyjs-success="success"></p>
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

    Or Outside the form:

    <p class="text-red-500 text-xs italic pt-2 @error('name') hidden @enderror" data-formlyjs-to="update-user" data-formlyjs-success="success"></p>

<form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

     

  • data-formlyjs-add, it is used to append the response to the element where it is placed, this can be used, for example to attach comments it comments area   Response Example: { "comment": "Nice Post" }   It can be used inside the form:

    <form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    <p class="text-xs italic pt-2" data-formlyjs-add="comment"></p>
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

    Or Outside the form:

    <p class="text-xs italic pt-2" data-formlyjs-to="update-user" data-formlyjs-add="comment"></p>

<form action="{{ route('account.update')}}" method="post" data-formlyjs-name="update-user" data-formlyjs-res-type="application/json">
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">

    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

     

  • data-formlyjs-class-add and data-formlyjs-class-remove can be used with data-formlyjs-success, data-formlyjs-res and data-formlyjs-error Explanation:

    • The attributte data-formlyjs-class-add add the classes when it receives a response
    • The attributte data-formlyjs-class-remove remove the classes when it receives a response
    • Usage Example: 
      <span role="alert">
    <p class="hidden" data-formlyjs-to="update-user" data-formlyjs-add="success" data-formlyjs-class-add="block border-b-2" data-formlyjs-class-remove="hidden">
        @if (session('success')) {{ session('success') } }@endif
    </p>
</span>
    • Classes must be separeted using spaces: data-formlyjs-class-add="block border-b-2" and data-formlyjs-class-remove="hidden"

     

  • data-formlyjs-remove, it is used to remove html element on form submit success response, this attribut must receive the element id to be removed  

    <h1>Remove Element on Success</h1>
<p id="remove">Element to be removed!</p>
<form action="{{ route('account.update')}}" method="post" data-formlyjs-name="remove" data-formlyjs-remove="remove" data-formlyjs-res-type="application/json">
    {{-- <span role="alert">
        <p class="font-proxima font-light bg-green-200 rounded-lg text-green-600 text-sm p-2 text-center mb-4 @if (!session('success')) hidden @endif" data-formlyjs-success="success" data-formlyjs-class-add="block border-b-2" data-formlyjs-class-remove="hidden  bg-green-200">
            @if (session('success')) {{ session('success') }}@endif
        </p>
    </span> --}}
    @csrf
    @method('patch')
    <input type="text" name="name" value="{{ $user->name}}">
    <span role="alert">
        <p class="text-red-500 text-xs italic pt-2" data-formlyjs-error="name">@error('name'){{ $message }}@enderror</p>
    </span>

    <input type="text" name="username" value="{{ $user->username}}">
    <span role="alert">
        <p class="text-red-500 text-xs italic pt-2" data-formlyjs-error="username">@error('username'){{ $message }}@enderror</p>
    </span>

    <input type="text" name="email"  value="{{ $user->email }}">
    <span role="alert">
        <p class="text-red-500 text-xs italic pt-2" data-formlyjs-error="email">@error('email'){{ $message }}@enderror</p>
    </span>
    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
    <button type="submit" data-formlyjs-saving="Saving...">
        <span data-formlyjs-saving-default>Save</span>
        {{-- <span class="hidden" data-formlyjs-loading>...</span> --}}
    </button>
</form>

     

  • data-formlyjs-type, it is used to specify the form type, available options: toggler, it is not required, this data-formlyjs-type it will append a class open on the <form></form> parent  

    <div class="data-formlyjs-toggler-container privacy-container">
    <form action="/account/profile/private" class="unpublic" class="" method="post" data-formlyjs-name="private" data-formlyjs-type="toggler" data-formlyjs-res-type="application/json">
        @csrf
        @method('patch')
        <input type="submit" value="Set Private">
    </form>
    <form action="/account/profile/public" method="post" class="public" data-formlyjs-name="star" data-formlyjs-type="toggler" data-formlyjs-res-type="application/json">
        @csrf
        @method('patch')
        <input type="submit" value="Set Public">
    </form>
</div>

     

  • data-formlyjs-res-type, it is used to specify the desired response type, available options: application/json, it is not required, default: application/json  

    <form action="/account/profile/private" class="unpublic" class="" method="post" data-formlyjs-name="private" data-formlyjs-res-type="application/json">
    @csrf
    @method('patch')
    <input type="submit" value="Set Private">
</form>

     

  • data-formlyjs-loading, it is displayed when user submit the form and waits the response, it can receive form name   It is displayed when any form on the page it is submitted

    <p class="hidden" data-formlyjs-loading>Saving...</p>
<form action="/account/profile/private" class="unpublic" class="" method="post" data-formlyjs-name="private">
    @csrf
    @method('patch')
    <input type="submit" value="Set Private">
</form>
<form action="/account/profile/public" class="public" class="" method="post" data-formlyjs-name="public">
    @csrf
    @method('patch')
    <input type="submit" value="Set Public">
</form>

      It only be displayed when the first form it is submitted, because it receives the form name, linking it to the form

    <p class="hidden" data-formlyjs-loading="private">Saving...</p>
<form action="/account/profile/private" class="unpublic" class="" method="post" data-formlyjs-name="private">
    @csrf
    @method('patch')
    <input type="submit" value="Set Private">
</form>
<form action="/account/profile/public" class="public" class="" method="post" data-formlyjs-name="public">
    @csrf
    @method('patch')
    <input type="submit" value="Set Public">
</form>

  • data-formlyjs-saving, it used in input and button, this attribut receives the text that should be replaced when user submit the form   Usage Example with <input></input> Explanation: When the user submit the form, if the input tag has the attribute data-formlyjs-saving the value of it it will replace the value of attribute value

    <form action="/account/profile/public" class="public" class="" method="post" data-formlyjs-name="public">
    @csrf
    @method('patch')
    <input type="submit" data-formlyjs-saving="Saving..." value="Save">
</form>

      Usage Example with <button></button> Explanation: When the user submit the form, if the button tag has the attribute data-formlyjs-saving the value of it it will replace the value of an inner html element with the attribute name data-formlyjs-saving-default

    <p class="hidden" data-formlyjs-loading="private">Saving...</p>
<form action="/account/profile/public" class="public" class="" method="post" data-formlyjs-name="public">
    @csrf
    @method('patch')
            <input type="submit" data-formlyjs-saving="Saving..." value="Save">
    <button type="submit" data-formlyjs-saving="Saving...">
        <span data-formlyjs-saving-default>Save</span>
        <span class="hidden" data-formlyjs-loading><svg>...</svg></span>
    </button>
</form>

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i formlyjs

      Repository

      github.com/vmiguellima/formlyjs

      Homepage

      github.com/vmiguellima/formlyjs#readme

      Weekly Downloads

      0

      Version

      1.0.1

      License

      ISC

      Unpacked Size

      60 kB

      Total Files

      13

      Last publish

      Collaborators

      • codeexposed
      Try on RunKit
      Report malware