Angular 5中如何实现关联Form Model的表单默认提交？

没问题，我来帮你搞定这个需求——实现关联Form Model的表单默认提交，并且保留提交后带POST数据重定向的原生表单行为。下面分步骤给你讲清楚：

1. 先做好Form Model关联（以Laravel为例） #

首先要确保表单正确关联到你的模型，这样表单字段会自动填充模型的现有数据。比如用Laravel Collective的表单组件（Laravel 9+也可以用原生表单结合模型数据）：

{!! Form::model($yourModel, [
    'route' => ['your.submit.route'], 
    'method' => 'POST', 
    'id' => 'auto-submit-form'
]) !!}
    <!-- 自动绑定模型字段的隐藏域或输入框 -->
    {!! Form::hidden('model_id', $yourModel->id) !!}
    {!! Form::text('username', old('username', $yourModel->username)) !!}
    {!! Form::email('email', old('email', $yourModel->email)) !!}
    <!-- 其他需要提交的字段 -->
{!! Form::close() !!}

这里old()函数很关键，它会优先取提交后的POST数据（如果重定向回来的话），没有的话再用模型的原始值，完全贴合原生表单的行为。

2. 实现页面加载自动提交表单 #

要让表单默认提交，最直接的方式是用JavaScript在页面加载完成后自动触发提交动作，和用户手动点击提交按钮的效果完全一致：

// 页面DOM加载完成后自动提交表单
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('auto-submit-form');
    if (form) {
        form.submit();
    }
});

如果你的项目用jQuery，也可以写成$(document).ready(function() { $('#auto-submit-form').submit(); });，效果是一样的。

3. 后端处理：提交后带POST数据重定向 #

要实现“提交后携带POST数据重定向”，核心在后端控制器的处理逻辑。以Laravel为例，接收POST请求的方法要这么写：

public function handleFormSubmit(Request $request)
{
    // 第一步：处理表单数据（验证、更新模型等）
    $request->validate([
        'username' => 'required|string',
        'email' => 'required|email',
    ]);

    $model = YourModel::find($request->model_id);
    $model->fill($request->only(['username', 'email']))->save();

    // 第二步：重定向并携带所有POST数据
    return redirect()->route('your.target.page')
        ->withInput($request->all()); // 把POST数据带到重定向后的页面
}

这样用户提交表单后，服务器处理完业务逻辑就会重定向到目标页面，而且重定向后的页面可以通过old('username')、old('email')获取到之前提交的POST数据，和原生表单提交后的重定向行为完全一致。

额外注意事项 #

• 如果你不想用JS自动提交，那只能让用户手动点击提交按钮，但“默认提交”的需求通常指自动触发，所以JS方案是最优解。
• 确保表单的method属性是POST，符合你的数据提交需求。
• 如果你用的是其他框架（比如Symfony的Form Model），核心逻辑也是类似的：关联模型填充表单字段 → 自动触发提交 → 后端处理后重定向并携带POST数据。

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