Question

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"}];

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

我想添加一个＆＃34;错误＆＃34; css类到具有验证错误的输入标记（因此它可以在其周围放置红色边框）。每次按下提交按钮时，组件中的错误列表都会更新。

我尝试过这样的事情，但它没有用。

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

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

Answer 1

您可以像以下一样使用它：

[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
}

Answer 2

在这种情况下，你可以使用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">

Answer 3

尝试这样做，使用find和hasOwnProperty来做

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

Answer 4

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

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

在课堂检查中，我将使用此功能

Answer 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>

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

5 个答案: