[英]Aurelia displaying validation errors per input
I'm having issues getting the errors to render in the HTML. 我在HTML中呈现错误时遇到问题。
ViewModel: 视图模型:
import {autoinject} from 'aurelia-framework';
import { ValidationRules, ValidationController, ValidationControllerFactory } from 'aurelia-validation';
// Models
import { NewCustomer } from '../../models/customer';
@autoinject
export class Register {
controller: ValidationController;
customer: NewCustomer;
constructor(controllerFactory: ValidationControllerFactory, customer: NewCustomer) {
this.controller = controllerFactory.createForCurrentScope();
this.customer = customer;
this.controller.addObject(this.customer);
}
validate(): void {
this.controller.validate().then(res => {
console.log(res);
if(res.valid) {
this.register();
}
});
}
}
ValidationRules
.ensure((c: NewCustomer) => c.first_name).displayName('first name').required().withMessage(`\${$displayName} cannot be blank.`)
.ensure((c: NewCustomer) => c.last_name).displayName('last name').required().withMessage(`\${$displayName} cannot be blank.`)
.ensure((c: NewCustomer) => c.email).displayName('first name').email().required().withMessage(`\${$displayName} cannot be blank.`)
.ensure((c: NewCustomer) => c.phone_number).displayName('phone number').matches(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/).withMessageKey('invalid phone number').required().withMessage(`\${$displayName} cannot be blank.`)
.ensure((c: NewCustomer) => c.password).displayName('password').minLength(7).required().withMessage(`\${$displayName} cannot be blank.`)
.on(NewCustomer);
And and example input: 并且示例输入:
<div class="sb-input-group no-margin" validation-errors.bind="first_nameErrors">
<label>First Name</label>
<input value.bind="customer.first_name" placeholder="First Name" class="sb-input-control">
<span class="help-block danger" repeat.for="errorInfo of first_nameErrors">
${errorInfo.error.message}
<span>
</div>
Now whenever I submit the form and I check the console I see that the validation rules are being picked up correctly; 现在每当我提交表单并检查控制台时,我都会看到验证规则正在被正确选取; however they are not rendering in the View. 但它们不在视图中渲染。 I've also tried doing validation-errors.bind="customer.first_nameErrors"
and also did not work. 我也尝试过validation-errors.bind="customer.first_nameErrors"
,也validation-errors.bind="customer.first_nameErrors"
。 What is the correct format for me to bind the errors to the view? 将错误绑定到视图的正确格式是什么?
EDIT: Here is the NewCustomer object 编辑:这是NewCustomer对象
export class NewCustomer {
first_name: string;
last_name: string;
email: string;
phone_number: string;
password: string;
companies: Company[];
selected_company_id: string;
}
It looks like you're missing the "& validate" markup in html to register the binding instance with your validation controller. 看起来你错过了html中的“&validate”标记来向你的验证控制器注册绑定实例。
Also checkout a Validation Renderer (There's some Bootstrap Validation Renderers around) which save you from adding error spans everywhere. 还要检查验证渲染器(周围有一些Bootstrap验证渲染器 ),这样可以避免在任何地方添加错误范围。
Most of this is in the docs , but it's taken me many passes to understand it all! 大多数是在文档中 ,但我需要多次通过才能理解这一切!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.