Angular5：如何将 ngClass 绑定到数组中的属性？答案

【问题标题】：Angular5: How to bind ngClass to a property in an array?Angular5：如何将 ngClass 绑定到数组中的属性？
【发布时间】：2018-03-28 06:29:22
【问题描述】：

HTML：

<select name="title" [(ngModel)]="person.title">
<select name="name" [(ngModel)]="person.name">
<select name="address" [(ngModel)]="person.address">
<select name="age" [(ngModel)]="person.age">

组件：

public person: Person;
public errors: = [{property:"name", message:"Name contains invalid characters"},{property:"age", message:"Age must be greater than 18"}];

我有一个包含四个属性的表单。单击提交按钮时，如果存在验证错误，它将进入错误数组。如果没有错误，则数组将为空。

我想向有验证错误的输入标签添加一个“错误”css 类（这样它就可以在它周围加上红色边框）。每次按下提交按钮时，组件中的错误列表都会更新。

我尝试过类似的方法，但它不起作用。

<input name="age" [ngClass]="{'error': errors.findIndex(x => x.property=='age') !== -1 }" [(ngModel)]="person.age">

有谁知道如何将输入字段上的 ngClass 绑定到数组中的属性？（我需要一个保留这个数组的解决方案）。

【问题讨论】：

当您更新表单数组时，为什么不检查属性并将错误类附加到相关输入中
建议尝试 inbuild 方法 find 和 hasOwnProperty ，易于使用和理解，答案相同
@Lasithds 我如何将错误类附加到相关输入？

标签： angular

【解决方案1】：

我不认为这是有效的表达式，但我会尝试的第一件事是将此函数包装在组件中的函数中。接下来我将传递一个属性名称，如果找到它则返回 ture：

 errorTest(prop) {
  return test=  this.error.findIndex(x => x.property == prop) > -1;      
}

在课堂检查中，我会使用这个功能

【讨论】：

使用函数的问题是当错误列表更新时类不会更新。当错误列表更新时，我也需要类自动更新。

【解决方案2】：

试试这样，使用find和hasOwnProperty就可以了

error.find( ele => return ele.hasOwnProperty('age') );

【讨论】：

【解决方案3】：

你可以像这样使用它：

[ngClass]="{'error': errors.findIndex(function(x){ return x.property == 'age'}) !== -1 }"

注意：不要在模板端使用 findIndex，而是创建一个在组件端为此函数并调用它。

模板端：

[ngClass]="{'error': isError('age') }"

组件端：

isError(name){
    return this.errors.findIndex(x => x.property == name ) !== -1
}

【讨论】：

我们也可以用Array.prototype.some方法代替findIndex
实际上这是复制/粘贴的错字，已修复。不过，您的解决方案只能在第一次使用。每次更新错误列表时，我也需要更新类。
@FruitDealer，请检查更新的答案吗？
@VivekDoshi 您的解决方案仅在加载组件时有效。当错误列表更新时，我需要更改类。所以我不认为我可以使用函数，因为我需要它与组件属性绑定。
@FruitDealer，我已经更新了第一个解决方案，调用函数是第二个解决方案，请检查我答案中的第二行代码并请检查

【解决方案4】：

在这种情况下，您可以将 getter 用作：

HTML

<input name="age" [ngClass]="{'error': isError}" [(ngModel)]="person.age">

然后在您的组件中使用 getter，例如：

组件

get isError() {
  return this.errors.findIndex(x => x.property=='age') !== -1;
}

其他解决方案

在 Object 中维护您的错误，例如：

errors = {
   age: "<message>",
   name: "<message>"
}

在您的 HTML 中直接与属性绑定，例如：

<input name="age" [ngClass]="{'error': errors.age != undefined}" [(ngModel)]="person.age">

【讨论】：

使用函数的问题是错误列表更新时类不会更新。当错误列表更新时，我也需要类自动更新（因为用户会不断按下提交按钮）
这不是正常功能，它是吸气剂，所以尝试一下，我相信它会起作用
@FruitDealer 我已经用另一种可能的解决方案更新了答案，您也可以尝试一下。
@FruitDealer 好运吗？

【解决方案5】：

您可以在提交功能的相关输入中添加类和错误。这是一个工作示例

let errors = [{property:"name", message:"Name contains invalid characters"},{property:"age", message:"Age must be greater than 18"}];
    
// on submit function
for(let i = 0; i < errors.length; i++) {
  let el = document.querySelector("#myform select[name="+ errors[i].property +"]");
  el.classList.add('error');
}

.error{
  border: 1px solid red;
}

<form id="myform">
    <select name="title" [(ngModel)]="person.title"></select>
    <select name="name" [(ngModel)]="person.name"></select>
    <select name="address" [(ngModel)]="person.address"></select>
    <select name="age" [(ngModel)]="person.age"></select>
  </form>

【讨论】：