角形验证和原始形式

时间:2015-03-16 21:02:01

标签: angularjs validation

我正在添加新用户' /'编辑现有用户'形成。如果页面加载了formData中的数据,那么我显然正在编辑现有用户,它会根据需要填充这些字段。

如果页面在formData中没有数据加载,那么这显然是一个新用户。如果它是新用户,则字段应为空但不应显示错误反馈

我认为这就是$ pristine的用途。在我的例子中看起来我试图填充字段是触发$ pristine = false。

我如何适应这两种情况?

我的傻瓜有点基本。在我的应用程序中,我从列出所有用户的页面启动表单(单击要编辑的用户),并且还有一个“添加用户”#39;按钮。这意味着我可以根据需要加载或不加载formData来加载页面。

http://plnkr.co/edit/WH9VQmleVQM2ELBREIYU?p=preview

我想知道它是否与使用双向绑定模型有关?

    ng-model="formData.username"
    value="{{formData.username || ''}}"

1 个答案:

答案 0 :(得分:0)

它们显示错误反馈,因为在你的css样式中你定义了input.ng-invalid,无论它是否是原始的都是如此。以下应解决您的问题:

input.ng-invalid.ng-dirty {
    border: 1px solid #a94442;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}