Angular5: How to bind ngClass to a property in an array?

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

Component:

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

I have a form with four properties. When the submit button is clicked, if there are validation errors it will go into the errors array. If there are no errors than the array will be empty.

I want to add an "error" css class to the input tags that have a validation error (so it can put red borders around it). Everytime the submit button is pressed the error list in the component will get updated.

I've tried something like this but it doesn't work.

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

Does anyone know how I can bind the ngClass on the input fields to a property in the array? (I need a solution that keeps this array).

Answer 1

You can use it like :

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

Note : Instead of using findIndex on template side , create a function on component side for this and call that.

---

Template Side :

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

Component Side :

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

---

Answer 2

You can use getter in this case as:

HTML

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

then in your component use getter like:

Component

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

Other solution

maintain your errors in Object like:

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

In your HTML bind with property directly like:

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

Answer 3

尝试这样，利用find和hasOwnProperty可以做到

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

Answer 4

I don't think this is valide expression, but first thing I will try i will be wraping this function in function in component. Next I will pass a property name and return ture if it find it:

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

In class check, I will use this function

Answer 5

You can add class and errors to relevant inputs on submit function. Here's a working example

 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>