Get API in Custom Components

When using FormCreate, custom components are a powerful tool that allows you to implement highly customized form elements based on business needs. When generating these custom components, FormCreate automatically provides a series of useful injection parameters to help you manage component and form interactions more efficiently. These parameters include API objects, configuration information, generation rules, and field names. The following is a detailed explanation and usage examples of these injection parameters.

For more information, see the documentation Get Form Context in Components

formCreateInject Parameter Details

1. formCreateInject.api

• Description: This API object contains a series of methods for manipulating forms, such as getting form values, setting field values, submitting forms, and more.

2. formCreateInject.options

• Description: This is the global configuration object for form components, containing all options passed when creating a form-create instance.

3. formCreateInject.rule

• Description: Generation rule object that defines all configurations of the component, such as label type, validation rules, events, etc.

4. formCreateInject.field

• Description: The field name bound to the current component, which is associated with the form's data object.

Application in Real Business Scenarios

Example: User Registration Form

Suppose you are developing a user registration form and need to create a custom component for selecting user roles, and enable or disable some fields based on different roles. In this case, the flexibility of formCreateInject is very useful.

<template>
  <RoleSelector :roles="roles" @change="onRoleChange"/>
</template>


<script>
export default {
  props: {
    formCreateInject: Object  
  },
  data() {
    return {
      roles: ['Administrator', 'Regular User', 'Guest']
    };
  },
  methods: {
    onRoleChange(selectedRole) {
      if (selectedRole === 'Administrator') {
        this.formCreateInject.api.disabled(['restrictedField'], false); // Enable administrator-specific fields
      } else {
        this.formCreateInject.api.disabled(['restrictedField'], true); // Disable fields
      }
    }
  }
}
</script>

Example: Customer Feedback Form

In a customer feedback form, you may want to dynamically display different input hints or help information based on the feedback type the user enters. Using formCreateInject.rule, you can implement such switching logic directly within the component.

<template>
  <div>
    <select @change="onFeedbackTypeChange($event)">
      <option value="Issue">Issue Feedback</option>
      <option value="Suggestion">Feature Suggestion</option>
      <option value="Other">Other</option>
    </select>
    <p>{{ currentPlaceholder }}</p>
  </div>
</template>


<script>
export default {
  props: {
    formCreateInject: Object
  },
  data() {
    return {
      currentPlaceholder: ''
    };
  },
  methods: {
    onFeedbackTypeChange(event) {
      const feedbackType = event.target.value;
      switch (feedbackType) {
        case 'Issue':
          this.currentPlaceholder = 'Describe issue details...';
          break;
        case 'Suggestion':
          this.currentPlaceholder = 'Provide your suggestion...';
          break;
        case 'Other':
          this.currentPlaceholder = 'Other feedback information...';
          break;
      }
      this.formCreateInject.rule.props.placeholder = this.currentPlaceholder;
    }
  }
}
</script>

Notes

• Make sure your custom component correctly receives the formCreateInject parameter, otherwise you won't be able to access the above functionalities.

Through this approach, FormCreate enables you to maintain the power and flexibility of form functionality in complex business scenarios, thereby improving development efficiency.