当输入无效时，Angular 可以将 css 类添加到父/同级元素吗?

Can Angular add a css class to a parent/sibling element when input is invalid

本文关键字：添加 元素 css 无效 输入 Angular      更新时间：2023-09-26

我的表单元素如下所示：

<div class="control-group">
    <label for="email">Email Address</label>
    <input type="email" class="form-control" name="email" ng-model="message.emailAddress" id="email" />
</div>

当电子邮件地址无效时，Angular 会自动将类"ng-invalid"添加到输入中 - 但我也希望它添加一个标签或对照组的类。

这可能吗？

或者有一个简单的解决方法吗？

如果您的表单名称是 myForm，您可以添加

ng-class="{'some-class-name': !myForm.email.$valid}"

到标签和/或控制组元素。

类被添加到标记为ng-invalid-inputName的父form元素中。你可以从中汲取灵感。

我想你可以使用angularjs ng-style

。

你可以做： 

ng-class="mode.input.$valid ? 'someclas': 'otherclass'";
或

嵌套用于多个类或检查：根据： https://stackoverflow.com/a/21970785/4812515stack 帖子

ng-class="model.input.$valid ? 'someclas': (model.input.$valid ? 'class':'class')";

如果向.control-group添加错误类，则可以设置输入父级的样式，也可以设置标签和输入的样式。

只需用ng-class检查布尔yourForm.email.$invalid即可。 yourForm是表单元素的名称属性值，email输入元素的名称属性 vale。

<form name="yourForm">
    <div class="control-group" ng-class="{'control-group-error': yourForm.email.$invalid}">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" name="email" ng-model="message.emailAddress" />
    </div>    
</form>
相关文章：