为什么角js css不适用形式

I apply css in form it should apply when my form is invalid .I also write important but nothing happen .In other words I make a dynamic form from json ,Now I need to validate that form .so I apply css which is not working.why I am apply css because some one suggest that in this how to validate form using $pristine and $dirty in angular? you please why it is not apply here is my plunker http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview

我将css应用到表单中，当表单无效时，我也会使用它。我也写很重要但什么也没有发生。换句话说，我从json中创建了一个动态表单，现在我需要验证表单。为什么我要应用css，因为有人建议，在这个方法中，如何使用$原始和$dirty的角来验证表单?请您解释一下为什么它不应用在这里，这是我的插入器http://plnkr.co/edit/eclvostuxq5tidryicf2?

/* Styles go here */


.ng-invalid {
  border :1px solid red !important;
}
.ng-pristine {
    border :1px solid blue !important;

}
.ng-pristine {
    border :1px solid blue !important;

}

Updated plunker http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p=preview I press login button nothing happen

更新恰好http://plnkr.co/edit/ECLvOstUxq5tIDrYicF2?p =预览我按登录按钮没有发生

2 个解决方案

#1

You need to update your css into this

你需要更新你的css。

input.ng-invalid {
  border :1px solid red !important;
}

the class ng-invalid applies to the form as well since it AngularJS detects that the form is invalid so it applies the class to the form.

类ng-invalid也适用于表单，因为它检测到表单无效，所以它将类应用于表单。

Edit

编辑

It seem that you are using a third party module for your forms. It has it's own validation styles so we have to use it. Here are some notes:

看起来,你是使用第三方模块的形式。它有它自己的验证风格所以我们必须使用它。这里有一些注意事项:

I added the novalidate directive to your formly directive. This will prevent the browser to trigger its default validation, the browser's default validation will not trigger the ng-submit function if it finds an error.
我在你的正式指令中加入了novalidate指令。这将防止浏览器触发它的默认验证，如果发现错误，浏览器的默认验证将不会触发ng提交函数。
I added an ng-class="{'form-submitted':submitted}" to the form directive itself. (This is similar to the approach of PatrickEvans' answer
我在表单指令本身中添加了一个ng类="{'form-submit ':submit}"。(这与PatrickEvans的回答类似。
In relation to Item 2, I modified the CSS to this. The red border will be applied if the form-submitted class is applied to the parent form.

关于项目2，我修改了CSS。如果表单提交的类应用于父窗体，则将使用红色边框。
```
.form-submitted input.ng-invalid {
  border :1px solid red !important;
}
```

See Plunkr

#2

You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style.

你有无效的样式值:1像素的纯红色!重要的是你在数字和px之间有一个空格，使它无效，所以它不会渲染那个样式。

If using Chrome, you can look at an elements applied styles and if there is a warning symbol next to the style (and has a line through it) it means it is an invalid value. Not sure what the other browsers Developer Tools looks like for this but this is what Chrome's looks like:

如果使用Chrome，您可以看到应用样式的元素，如果在样式旁边有一个警告符号(并且有一行)，那么它就意味着它是一个无效的值。不知道其他浏览器开发工具是什么样子的但这就是Chrome的样子:

为什么角js css不适用形式

As for making the css only apply after hitting the login button you will need to setup a check. You can do this by using the ng-class directive

要使css只在按下登录按钮后才应用，你需要设置一个检查。您可以通过使用ng类指令来实现。

css

.ng-invalid.apply {
  border :1px solid red !important;
}

html

<input type="email" ng-class="{apply:loginAttempted}" />
<button type="submit" ng-click="loginAttempted=true" />

the ng-class will apply the style apply to the element when loginAttempted is a truthy value. So when the element gets the ng-invalid and the apply classes then the border will be rendered.

当登录尝试是一个truthy值时，ng类将应用样式应用于元素。因此，当元素获得ng-无效和应用类时，边界将被呈现。

#1

You need to update your css into this

你需要更新你的css。

input.ng-invalid {
  border :1px solid red !important;
}

the class ng-invalid applies to the form as well since it AngularJS detects that the form is invalid so it applies the class to the form.

类ng-invalid也适用于表单，因为它检测到表单无效，所以它将类应用于表单。

Edit

编辑

It seem that you are using a third party module for your forms. It has it's own validation styles so we have to use it. Here are some notes:

看起来,你是使用第三方模块的形式。它有它自己的验证风格所以我们必须使用它。这里有一些注意事项:

I added the novalidate directive to your formly directive. This will prevent the browser to trigger its default validation, the browser's default validation will not trigger the ng-submit function if it finds an error.
我在你的正式指令中加入了novalidate指令。这将防止浏览器触发它的默认验证，如果发现错误，浏览器的默认验证将不会触发ng提交函数。
I added an ng-class="{'form-submitted':submitted}" to the form directive itself. (This is similar to the approach of PatrickEvans' answer
我在表单指令本身中添加了一个ng类="{'form-submit ':submit}"。(这与PatrickEvans的回答类似。
In relation to Item 2, I modified the CSS to this. The red border will be applied if the form-submitted class is applied to the parent form.

关于项目2，我修改了CSS。如果表单提交的类应用于父窗体，则将使用红色边框。
```
.form-submitted input.ng-invalid {
  border :1px solid red !important;
}
```

See Plunkr

#2

You have invalid style values: 1 px solid red !important you have a space between the number and px which makes it invalid so it does not render that style.

你有无效的样式值:1像素的纯红色!重要的是你在数字和px之间有一个空格，使它无效，所以它不会渲染那个样式。

为什么角js css不适用形式

As for making the css only apply after hitting the login button you will need to setup a check. You can do this by using the ng-class directive

要使css只在按下登录按钮后才应用，你需要设置一个检查。您可以通过使用ng类指令来实现。

css

.ng-invalid.apply {
  border :1px solid red !important;
}

html

<input type="email" ng-class="{apply:loginAttempted}" />
<button type="submit" ng-click="loginAttempted=true" />

the ng-class will apply the style apply to the element when loginAttempted is a truthy value. So when the element gets the ng-invalid and the apply classes then the border will be rendered.

当登录尝试是一个truthy值时，ng类将应用样式应用于元素。因此，当元素获得ng-无效和应用类时，边界将被呈现。

秒客网

为什么角js css不适用形式

2 个解决方案

#1

See Plunkr

#2

#1

See Plunkr

#2

相关文章