Edit a Record — Custom Layout & Validation

同学们，今天我们来聊聊当你用 Lightning Web Components 做自定义表单布局时，一个非常得力的小帮手——`lightning-record-edit-form`。听名字就知道，它是让你编辑记录的，但和全自动的`lightning-record-form`不同，这个组件给了你更大的控制权。 你可以自己安排字段的位置，比如把几个输入框并排放，加一些分隔线，或者插入自定义的逻辑。它里面用`lightning-input-field`直接根据字段的元数据类型，自动渲染出合适的输入控件，日期字段就显示日期选择器，下拉列表就显示下拉菜单，不用你操心。 但要注意，`lightning-record-edit-form`可不会像`lightning-record-form`那样自带保存和取消按钮，你得自己设计按钮并添加逻辑。如果你想做一个“重置”按钮，清空所有修改，就不能简单地调用表单自带的`reset`方法。你需要用`this.template.querySelectorAll`找到表单里面所有的`lightning-input-field`，然后一个一个调用它们的`reset()`方法。这是因为框架需要逐个字段去通知它们恢复原值。 那如果保存时出错了怎么办？比如后端的验证规则没通过，或者重复记录。`lightning-record-edit-form`会触发一个`error`事件，你可以在这个事件里获取非常详细的错误信息。它的结构是`event.details.outcome.fields`，那是一个按字段名索引的对象。比如你一个叫“Name”的复合字段包含了“FirstName”和“LastName”，如果姓氏有问题，错误信息就在`fields.Name`这个对象里，它内部还有一个`constituentFields`，专门告诉你具体是哪个子字段报错，很贴心。 除了后端的验证，你可能还想在浏览器里做自定义的验证。比如“金额必须大于零，不能只靠后端”。这时候，你可以用`lightning-input-field`的`setCustomValidity`方法，如果发现不合规就设置一个错误消息，然后用`reportValidity()`让界面立刻显示错误提示。这个操作要放在提交处理函数里。当你点击自己的保存按钮时，一定先调用`event.preventDefault()`阻止表单自动提交，你自己跑一遍验证逻辑，确认所有字段都合规后，再手动用`this.template.querySelector('lightning-record-edit-form').submit(fields)`把数据送出去。这里的`fields`参数是可选的，如果某个字段有特别修正的值，你可以传进去覆盖。 这样就完成了一个完整自定义布局、带前后端双重验证的表单。是不是觉得这个组件既灵活又强大呢？自己试试看，一步一步来，你很快就能掌握。