如何在Yii2中创建自定义ActiveForm字段类型（如JsonInput）

嘿，这个需求我之前刚好实现过，完全可以做到不用每次写widget()，直接像原生的textInput()那样链式调用。下面给你一步步拆解实现过程：

首先我们需要继承Yii2的ActiveField类，在里面实现我们的JsonInput方法，用来渲染带特殊效果的JSON输入框。比如在app/components目录下创建JsonInputField.php：

namespace app\components;

use yii\widgets\ActiveField;
use yii\web\View;

class JsonInputField extends ActiveField
{
    public function JsonInput($options = [])
    {
        // 合并默认配置和用户传入的选项，比如给输入框加个专属class方便后续样式/JS处理
        $defaultOptions = [
            'class' => 'json-input form-control',
            'rows' => 6, // 默认用多行文本框，你可以根据需求改成text类型
            'placeholder' => '请输入合法的JSON格式内容'
        ];
        $options = array_merge($defaultOptions, $options);

        // 渲染输入框，这里用textarea示例，你也可以自定义HTML结构
        $this->input('textarea', $options);

        // 注册自定义JS，实现特殊渲染效果，比如失去焦点时自动格式化JSON
        $view = $this->form->getView();
        $view->registerJs("
            $('.json-input').on('blur', function() {
                const $this = $(this);
                try {
                    // 解析并格式化JSON
                    const jsonData = JSON.parse($this.val().trim());
                    $this.val(JSON.stringify(jsonData, null, 2));
                } catch (e) {
                    // 处理JSON格式错误，比如提示用户
                    console.error('JSON格式错误:', e);
                    $this.addClass('is-invalid');
                }
            });
            
            // 输入时移除错误样式
            $('.json-input').on('input', function() {
                $(this).removeClass('is-invalid');
            });
        ", View::POS_READY);

        // 保持链式调用，返回当前实例
        return $this;
    }
}

接下来我们需要创建一个自定义的ActiveForm子类，让它默认使用我们刚才创建的JsonInputField作为字段类。在app/components目录下创建CustomActiveForm.php：

namespace app\components;

use yii\widgets\ActiveForm;

class CustomActiveForm extends ActiveForm
{
    // 指定我们自定义的字段类
    public $fieldClass = 'app\components\JsonInputField';
}

现在就可以在视图里像你想要的那样调用了，只需要引入我们的CustomActiveForm：

use app\components\CustomActiveForm;
use app\models\YourModel;

$model = new YourModel();

$form = CustomActiveForm::begin([
    'id' => 'your-form-id',
    // 其他ActiveForm配置...
]);

// 直接链式调用JsonInput方法，和textInput用法完全一致
echo $form->field($model, 'json_attribute')->JsonInput(['maxlength' => true]);

CustomActiveForm::end();

• 验证处理：记得在模型里给JSON字段加上JsonValidator，确保输入合法：

  public function rules()
  {
      return [
          ['json_attribute', 'yii\validators\JsonValidator'],
          // 其他验证规则...
      ];
  }
  

• 第三方库集成：如果需要更复杂的JSON编辑效果（比如可视化编辑），可以在JsonInput方法里注册第三方库，替换掉示例里的简单JS逻辑。
• 样式定制：通过json-input这个class可以给输入框添加自定义CSS，比如调整字体、背景色等，强化特殊渲染效果。

内容的提问来源于stack exchange，提问作者Chris