fc-form

An element to be used as container for form fields

Usage

<script>
   import '@forter/form';
</script>
<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name.firstName" label="dog first name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field required type="textarea" hideResize="true" rows="2" path="dog.story" label="dog story" placeholder="Enter dog story.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="currency" currencysymbol="₪" path="dog.money" label="dog amount of money" placeholder="Enter money.."></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" value="1590065478943" label="birth date"></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
         <fc-form-field type="dropdown" clearable="" path="dog.height" label="dog height" placeholder="select dog height" options='["short", "medium", "tall"]'></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="button-group" path="dog.size" label="dog size" options='["big", "small", "medium"]' single-selection></fc-form-field>
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select" single-selection><option value="grey">grey color</option><option value="brown">brown color</option></fc-form-field>
         <fc-form-field type="chips" path="dog.clothes" label="dog clothes" options='["sweater","boots","tail-warmer"]'></fc-form-field>
         <fc-form-field type="chips" menu path="dog.names" label="dog names" options='["sweetheart","cutie","baby"]' values='["sweetheart"]'></fc-form-field>
         <fc-form-field type="segmented-control" path="dog.color" label="dog color" options='[{"value":"Brown","label":"Brown"},{"value":"Black","label":"Black"},{"value":"White","label":"White","default":true},{"value":"Beige","label":"Beige","disabled":true}]'></fc-form-field>
     </fc-form-section>
     <fc-form-section>
        <fc-form-field type="text" path="dog.name.lastName" label="dog last name" placeholder="Enter dog name.."></fc-form-field>
     </fc-form-section>
     <fc-form-section>
            <fc-form-field value="1" type="radio-group" path="dog.healthy" label="dog healthy">
                 <option value="1">Yes</option>
                 <option value="0">No :(</option>
            </fc-form-field>
     <fc-form-section>
</fc-form>

Examples

<!-- recustive sections -->
<fc-form style="background-color:white;padding:0">
   <fc-form-section recursive style="    margin-bottom: -2px;">
      <fc-button-group single-selection>
        <button active>AND</button>
        <button>OR</button>
      </fc-button-group>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Group
      </fc-button>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Field
      </fc-button>

   </fc-form-section>
   <fc-form-section recursive sticky>
      <fc-select label="First Name" placeholder="Matches" list='["Matches", "Contains", "Starts With"]'>
      </fc-select>
      <fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
   <fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
   <fc-form-section recursive>
      <fc-button-group single-selection>
        <button active>AND</button>
        <button>OR</button>
      </fc-button-group>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Group
      </fc-button>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Field
      </fc-button>
<fc-button icon="delete"></fc-button></fc-button>
   </fc-form-section >
   <fc-form-section recursive sticky>
      <fc-select label="First Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
      </fc-select>
      <fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
   <fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
   <fc-separator></fc-separator>
   <fc-select label="Last Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
      </fc-select>
      <fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
   <fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
   <fc-form-section recursive>
      <fc-button-group single-selection>
        <button active>AND</button>
        <button>OR</button>
      </fc-button-group>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Group
      </fc-button>
      <fc-button width="small">
        <fc-icon-svg name="add" size="small"></fc-icon-svg>
        Add Field
      </fc-button>
<fc-button icon="delete"></fc-button></fc-button>
   </fc-form-section >
   <fc-form-section recursive sticky>
      <fc-select label="First Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
      </fc-select>
      <fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
   <fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>
   <fc-separator></fc-separator>
   <fc-select label="Last Name" placeholder="Matches" list="['Matches', 'Contains', 'Starts With']">
      </fc-select>
      <fc-input style="margin-top:26px" size="medium" placeholder="Enter text..."></fc-input>
   <fc-button icon="delete" style="margin-top:25px"></fc-button></fc-button>

   </fc-form-section>

   </fc-form-section>
   </fc-form-section>
</fc-form>

<!-- Sample:single section -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:single section with tags, dropdowns and text -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]'></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: default values -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" path="dog.breed" label="dog breed">
             <option value="terrier" default>Terrier</option>
             <option value="labrador">Labrador</option>
             <option value="german shepherd">German Shepherd</option>
         </fc-form-field>
         <fc-form-field type="dropdown" path="dog.food" label="dog food">
             <option value="bones">Bones</option>
             <option value="carrots">Carrots</option>
             <option value="fish" default>Fish</option>
         </fc-form-field>
            <fc-form-field type="button-group" path="dog.ageCategory" label="dog age category">
             <option value="1">0-3</option>
             <option value="2" default>3-8</option>
             <option value="3">8+</option>
         </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:one section with break line -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section>
         <fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
         <fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
         <fc-form-break-line></fc-form-break-line>
         <fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:two sections with required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.firstName" label="dog first name" placeholder="Enter dog first name.." required></fc-form-field>
         <fc-form-field type="text" path="dog.lastName" label="dog last name" placeholder="Enter dog last name.." required></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.firstName" label="owner first name" placeholder="Enter owner fiest name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.lastName" label="owner last name" placeholder="Enter owner last name.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text and numbers and date -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.."></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.."></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text, numbers and validations -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name (up to 10 chars)" maxlength="10" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age (1-99)" placeholder="Enter dog age.."  min="1" max="99"></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name (at least 5 chars)" minlength="5" placeholder="Enter owner name.."></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone (5 to 10 chars)" placeholder="Enter owner phone.." minlength="5" maxlength="10"></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:text, numbers, tags, dropdowns and required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details">
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample:collapsable with text, numbers, tags, dropdowns and required fields -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details" collapsable>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Owner Details" collapsable>
         <fc-form-field type="text" path="owner.name" label="owner name" placeholder="Enter owner name.." required></fc-form-field>
         <fc-form-field type="text" path="owner.phone" label="owner phone" placeholder="Enter owner phone.." required></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: column alignment -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details" align="column">
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.."></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.."></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]' required></fc-form-field>
         <fc-form-field type="segmented-control" path="dog.color" label="dog color" options='[{"value":"Brown","label":"Brown"},{"value":"Black","label":"Black"},{"value":"White","label":"White","default":true},{"value":"Beige","label":"Beige","disabled":true}]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: with other value -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="tags" allow-other-option path="dog.breed" label="dog breed">
             <option value="terrier">Terrier</option>
             <option value="labrador">Labrador</option>
             <option value="german shepherd">German Shepherd</option>
         </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined values -->

<fc-form model='{"dog":{"money": "10", "color": "gray_value", "name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"], "birthDate": "1593810000000"}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="currency" path="dog.money" label="dog money" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
         <fc-form-field type="segmented-control" options='["bones", "carrots", "fish"]'path="dog.birthDate"></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined other value -->

<fc-form model='{"dog":{"food": ["fish", "steak"]}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field type="tags" allow-other-option path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: field with icons -->

<fc-form>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
          <fc-form-field type="tags"
                        style="--fc-form-tags-padding: 5px 10px;"
                        path="dog.icon"
                        label="dog icon">
                        <option value="next"><fc-icon icon="next"></fc-icon></option>
                        <option value="star"><fc-icon icon="star"></fc-icon></option>
            </fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: Reset form to pre-defined values -->

<fc-form model='{"dog":{"color": "gray_value", "age": "5", "food": ["fish", "bones"], "birthDate": "1593810000000", "feces": "black"}}' id="register-form">
     <label>Register new Dog</label>
        <button onclick="function resetForm() {
          let dogElement = document.getElementById('register-form').reset();
        };resetForm()">Reset Form</button>
     <fc-form-section label="Dog Details">
         <fc-form-field type="select" path="dog.color" label="dog color" placeholder="Select color.." required><option value="gray_value">gray color</option><option value="black_value">black color</option></fc-form-field>
         <fc-form-field type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
         <fc-form-field type="date" path="dog.birthDate" label="dog birth date"></fc-form-field>
         <fc-form-field type="segmented-control" label="feces" path="dog.feces" options='[{"value": "brown", "label": "Brown"}, {"value": "black", "label": "Black"}]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: Field is disabled -->

<fc-form model='{"dog":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}, "dog2":{"disabledDogFood": ["carrots"], "activeDogFood": ["fish"]}}'>
     <label>Register new Dog</label>
     <fc-form-section label="Dog Details">
         <fc-form-field
          disabled
          path="dog.disabledDogFood"
          type="button-group"
          label="disabled dog food"
          options='["bones", "carrots", "fish"]'>
         </fc-form-field>
         <fc-form-field
          path="dog.activeDogFood"
          type="button-group"
          label="active dog food"
          options='["fish", "carrots"]'></fc-form-field>
     </fc-form-section>
     <fc-form-section label="Dog Details 2">
         <fc-form-field
          disabled
          path="dog2.disabledDogFood"
          type="tags"
          label="disabled dog food"
          options='["bones", "carrots", "fish"]'>
         </fc-form-field>
         <fc-form-field
          path="dog2.activeDogFood"
          type="tags"
          label="active dog food"
          options='["fish", "carrots"]'></fc-form-field>
     </fc-form-section>
</fc-form>

<!-- Sample: pre-defined values and remove field -->

<fc-form model='{"dog":{"name":"joey", "age": "5", "breed": "terrier", "food": ["fish", "bones"]}}'>
     <label>Register new Dog
        <button onclick="function toggleDogName() {
          let dogElement = document.getElementById('dog-name');
          if (dogElement && dogElement.parentElement) {
              dogElement.parentElement.removeChild(dogElement);
          } else {
                function htmlToElement(html) {
                  var template = document.createElement('template');
                  html = html.trim(); // Never return a text node of whitespace as the result
                  template.innerHTML = html;
                  return template.content.firstChild;
              }
              let docSectionElement = document.getElementById('dog-section');
              let newDogNameElement = htmlToElement(`<fc-form-field id='dog-name' type='text' path='dog.name' label='dog name' placeholder='Enter dog name..' required></fc-form-field>`);
              docSectionElement.prepend(newDogNameElement);
          }
        };toggleDogName()">toggle dog name</button>
     </label>
     <fc-form-section id="dog-section" label="Dog Details">
         <fc-form-field id="dog-name" type="text" path="dog.name" label="dog name" placeholder="Enter dog name.." required></fc-form-field>
         <fc-form-field type="number" path="dog.age" label="dog age" placeholder="Enter dog age.." required></fc-form-field>
         <fc-form-field type="dropdown" path="dog.breed" label="dog breed" placeholder="select dog breed" options='["terrier", "labrador", "german shepherd"]' required></fc-form-field>
         <fc-form-field type="tags" path="dog.food" label="dog food" options='["bones", "carrots", "fish"]'></fc-form-field>
     </fc-form-section>
</fc-form>

Properties

| Property | Attribute | Type | Default | Description | |-------------------------|-------------------------|---------------------|---------|--------------------------------------------------| | customRenderers | custom-renderers | any | {} | Object with custom render functions to build custom fields.Key is the "type" property to pass the fc-form-fieldValue is a function that return lit-html template. | | customValidators | custom-validators | any | {} | Object with custom validations functionsKey is the validator name property to pass the fc-form-field in the "validations" propertyValue is a function that return null if the feild is valid, else should return string that is the error enum | | dirty | dirty | boolean | false | If the form is dirty | | disabled | disabled | boolean | false | If the element is disabled | | initSectionCount | | WeakMap<any, any> | | | | invalidFields | invalidFields | any[] | | List of invalid fields | | missingRequiredFields | missingRequiredFields | any[] | | List of required fields that are empty | | model | model | {} | {} | Model of the data | | renderErrorMessage | render-error-message | any | | Object with function to render the validation errorKey is the errorEnumValue is a function that will return string of the error message | | touched | touched | boolean | false | If the form was touched by the user | | valid | valid | boolean | false | Internal Observables |

Events

| Event | |----------| | change |

CSS Custom Properties

| Property | Description | |-----------------------------------|-------------------------------------------------| | --fc-form-background-color | form background color. default: "white". | | --fc-form-border-radius | form border radius. default: "5px". | | --fc-form-border-size | form border size. default: "1px". | | --fc-form-label-font-size | form's label font size. default: "13px". | | --fc-form-label-font-weight | form's label font weight. default: "bold". | | --fc-form-label-margin-bottom | form's label margin bottom. default: "8px". | | --fc-form-padding | form inner padding. default: "10px". | | --fc-form-section-margin-bottom | form's sections margin bottom. default: "10px". | | --fc-form-section-margin-left | form's sections margin left. default: "2px". |