React js Laravel 动态表单字段验证

Question

我有一个带有从 Laravel 8 验证的动态输入字段的表单，并将错误消息作为响应发回。

我在这里面临的问题是非动态表单字段已按预期进行验证，但在动态表单字段中，即使填充了动态输入字段并且错误消息显示在每个动态输入下，验证错误也会出现因此表单没有被提交。

这是我的 laravel 验证器。地址字段是唯一可以添加更多的动态输入字段。

$validator = Validator::make($request->all(), [
        'name' => 'required',
        'code' => 'required',
        'agent_id' => 'required',
        'phone_home' => 'required',
        'phone_work' => 'required',
        'phone_mobile' => 'required',
        'address' => 'required',
    ]);

    if ($validator->fails()) {
        return response()->json([
            'status' => 422,
            'errors' => $validator->messages(),
        ]);

我正在使用反应钩子。 这是我的状态的添加方式。

const [errorList, setError] = useState([])
const [inputList, setInputList] = useState({
name: '',
code: '',
agent_id: '',
phone_home: '',
phone_work: '',
phone_mobile: '',
address_list: [{ address: '' }],
})

在这里我提交表单并在未添加字段时出现错误。

const submitProductMix = (e) => {
e.preventDefault()
axios.post(`/api/create_customer`, inputList).then((res) => {
  if (res.data.status === 200) {
    swal('Success', res.data.message, 'success')
    setError([])
    history.push('/customers')
  } else if (res.data.status === 422) {
    setError(res.data.errors)
  }
})
}

这里是我添加动态表单字段和错误列表的地方。

{inputList.address_list.map((items, i) => {
              return (
                <>
                  <div key={i} className="row">
                    <div className="col-lg-8 mb-3">
                      <div className="form-group">
                        <label className="pb-2">
                          Delivery Address <span className="text-danger">*</span>
                        </label>
                        <input
                          className="form-control"
                          type="text"
                          name="address"
                          onChange={(e) => handleChange(e, i)}
                          value={items.address}
                          placeholder="Delivery Address"
                        />
                        <span className="text-danger">{errorList.address}</span>
                      </div>
                    </div>

                    {inputList.address_list.length - 1 === i && (
                      <div className="col-lg-1 mb-2 mt-4 pt-2">
                        <button className="btn btn-success" onClick={handleAddInput}>
                          Add
                        </button>
                      </div>
                    )}

                    {inputList.address_list.length !== 1 && (
                      <div className="col-lg-1 mb-2 mt-4 pt-2">
                        <button
                          className="btn btn-danger"
                          onClick={(e) => handleRemoveInput(e, i)}
                        >
                          Remove
                        </button>
                      </div>
                    )}
                  </div>
                </>
              )
            })}

我已经添加了整个地图以及两个按钮，以显示我如何专门添加或删除动态表单字段。

这是我的控制台日志

Object { name: (1) […], code: (1) […], agent_id: (1) […], phone_home: (1) […], phone_work: (1) […], phone_mobile: (1) […], address: (1) […] }
​
address: Array [ "The address field is required." ]
​​
0: "The address field is required."
​​
length: 1
​​
<prototype>: Array []
​
agent_id: Array [ "The agent id field is required." ]
​​
0: "The agent id field is required."
​​
length: 1
​​
<prototype>: Array []
​
code: Array [ "The code field is required." ]
​​
0: "The code field is required."
​​
length: 1
​​
<prototype>: Array []
​
name: Array [ "The name field is required." ]
​​
0: "The name field is required."
​​
length: 1
​​
<prototype>: Array []
​
phone_home: Array [ "The phone home field is required." ]
​​
0: "The phone home field is required."
​​
length: 1
​​
<prototype>: Array []
​
phone_mobile: Array [ "The phone mobile field is required." ]
​​
0: "The phone mobile field is required."
​​
length: 1
​​
<prototype>: Array []
​
phone_work: Array [ "The phone work field is required." ]
​​
0: "The phone work field is required."
​​
length: 1
​​
<prototype>: Array []
​
<prototype>: Object { … }

这是我从前端获得的后端请求数据（dd）。

 array:7 [
  "name" => null
  "code" => null
  "agent_id" => null
  "phone_home" => null
  "phone_work" => null
  "phone_mobile" => null
  "address_list" => array:1 [
    0 => array:1 [
      "address" => null
    ]
  ]
]

添加地址列表而不是验证器中的地址时的响应

{"status":422,"errors":{"name":["The name field is required."],"code":["The code field is required."],"agent_id":["The agent id field is required."],"phone_home":["The phone home field is required."],"phone_work":["The phone work field is required."],"phone_mobile":["The phone mobile field is required."]}}
 

Answer 1

您可以使用 'address_list' => 'required' 而不是

'address_list' => 'required'

所以你的最终验证器会是这样的

 $validator = Validator::make($request->all(), [
            'name' => 'required',
            'code' => 'required',
            'agent_id' => 'required',
            'phone_home' => 'required',
            'phone_work' => 'required',
            'phone_mobile' => 'required',
            'address_list' => 'required',
        ]);

或者，如果您想检查 array_list 是否包含至少一个地址，您可以这样做。

'address_list' => '必需|数组|min:1' 如果你想检查 address_list 必须在 1 到 10 之间，你也可以这样做

'address_list' => '必需|array|between:1,10'

为任何想要研究它的人附上link。