首页 > 解决方案 > 如何找到我的表单有一个真实状态的“必需”错误

问题描述

我在我的角度使用反应形式。我想知道我的表单是否required在任何表单字段中引发了任何错误。

目前我发现:

this.transtForm.get('Name').hasError('required')- 但是页面中存在 20 个表单域。所以我想知道至少任何一个字段都有required真实状态的错误。

我不能使用this.transtForm.valid- 因为用户甚至可能也输入了错误的电子邮件 ID。这是允许的。它将通过电子邮件模式关注焦点。

标签: angularangular-formsangular8

解决方案


这可能会有所帮助,像这样?我们在一个数组中保存 20 个字段,如下所示,一个函数将遍历数组并在出现任何错误时发出警报。

const fields = [
    { label: 'Name', validations: ['required'] },
    { label: 'Email', validations: ['required', /\w+/g] }
];

function isValidForm() {
    for (const field of fields) {
        field.validations.map(validator => {
            if (typeof validator === 'string') {
                if (this.transtForm.get(field.label).hasError(validator)) {
                    alert('Your error message');
                }
            } else {
                if (!validator.test('')) {
                    alert('Your error message');
                }
            }
        });
    }
}

if (isValidForm()) {
    // Do stuff here...
}

推荐阅读