如何使用JavaScript操作内联创建模态框中的CRUD字段？

当然可以用JavaScript操作内联创建模态框中的字段，你之前的方法无效是因为内联创建模态框是动态生成的DOM元素，初始页面加载时并不存在，且subfield()方法适用于嵌套字段（如repeatable类型字段的子字段），而非内联创建的独立模态框字段。

正确实现步骤 #

1. 监听内联创建模态框的打开事件：Backpack提供了inline_create_opened事件，会在模态框渲染完成后触发，此时可以安全操作其中的字段。
2. 通过内联创建API定位字段：利用crud.inlineCreate.field()方法直接获取模态框内的字段实例，进行赋值、禁用等操作。

代码示例 #

// 监听内联创建模态框打开事件
$(document).on('inline_create_opened', function(event, fieldName) {
    // 仅处理目标字段的内联模态框
    if (fieldName === 'authors') {
        // 获取模态框中的name字段
        const authorNameField = crud.inlineCreate.field('name');
        
        // 示例操作1：设置默认值
        authorNameField.val('默认作者名称');
        
        // 示例操作2：禁用字段
        authorNameField.attr('disabled', true);
        
        // 示例操作3：添加字段验证提示
        authorNameField.on('blur', function() {
            if ($(this).val().length < 2) {
                $(this).addClass('is-invalid');
                $(this).next('.invalid-feedback').text('作者名称长度不能少于2位');
            } else {
                $(this).removeClass('is-invalid');
            }
        });
    }
});

替代方案：直接通过DOM选择器操作 #

如果内联创建API无法满足需求，也可以通过模态框的ID直接定位字段（Backpack内联模态框的ID格式为inline_create_{entity}，此处为inline_create_author）：

$(document).on('inline_create_opened', function(event, fieldName) {
    if (fieldName === 'authors') {
        // 直接选择模态框内的name输入框
        $('#inline_create_author input[name="name"]').val('默认作者名');
    }
});

内容的提问来源于stack exchange，提问作者Miquel Àngel