使 OWL 字段无效以防止在 Odoo 17 中保存数据

Question

我正在使用名为 EmailField 的电子邮件小部件来添加我需要的新功能。 此电子邮件字段未验证格式，它允许您在不验证的情况下保存数据。 所以我的问题是 Odoo OWL 黑魔法（因为没有关于它的评论或文档）有什么可以使数据无效并阻止用户保存？

/** @odoo-module **/
import { useState } from "@odoo/owl";
import { EmailField } from "@web/views/fields/email/email_field";
import { _t } from "@web/core/l10n/translation";
import { useInputField } from "@web/views/fields/input_field_hook";
import { patch } from "@web/core/utils/patch";

patch(EmailField.prototype, {
    setup() {
        super.setup();
        this.state = useState({ isValid: false, errorMessage: "" });
        useInputField({ getValue: () => this.validateEmail() });
    },
    validateEmail() {
        if (this.props.record.data[this.props.name]) {
            if (!this.props.record.data[this.props.name].match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) {
                this.state.isValid = false;
                this.state.errorMessage = _t("Invalid email");
                this._showErrorMsg();
            }
        } else {
            this.state.isValid = true;
            this.state.errorMessage = "";
        }
        return this.props.record.data[this.props.name] || "";
    },
    _showErrorMsg() {
        this.env.services.notification.add(_t("Invalid email"), { type: "danger" });
    },
});

我扩展了 Widget 并在您编写时设置验证。但仍然保存数据。

Answer 1

useInputField 挂钩中有一个参数，它在保存之前解析值，这保证了 validateEmail() 在所有情况下都会触发，以正确确定是否应该引发错误。我更新了您的代码，它的工作原理正如我假设您所期望的那样......

/** @odoo-module **/
import { EmailField } from "@web/views/fields/email/email_field";
import { _t } from "@web/core/l10n/translation";
import { useInputField } from "@web/views/fields/input_field_hook";
import { patch } from "@web/core/utils/patch";

patch(EmailField.prototype, {
    setup() {
        super.setup();
        useInputField({ getValue: () => this.props.record.data[this.props.name] || "", parse: (v) => this.validateEmail(v)});
    },
    validateEmail(v) {
        if (v && !v.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) { 
            this.props.record.setInvalidField(this.props.name);               
            this._showErrorMsg();                
        }

        return v
    },
    _showErrorMsg() {
        this.env.services.notification.add(_t("Invalid email"), { type: "danger" });
    },
});

关键是使用函数setInvalidField()

this.props.record.setInvalidField(this.props.name);

这将突出显示该字段并阻止保存