formlyjs v1.0.1

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

Responses

Reserved response keys

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" | This means we just want to add the classes from data-formlyjs-class-add and remove from data-formlyjs-class-remove if the the key success exist in the reponse object | | data-formlyjs-success="success|inner" | This means we just want to replace the innerHTML from the current object if the the key success exist in the reponse object | | data-formlyjs-res="avatar|ra" | This means we just want to replace the value of current html attributtes values, if the the key avatar exist in the reponse object | | 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

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

  ```php
  <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:

  ```php
  <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:
  ```php
  <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:

  ```php
  <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:
  ```php
  <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>