turn md-chips input field border red on blur if empty

Question

I'm really new to angular (angular materials) and I'm working on this form that contains several fields (inputs, chips with autocomplete). The inputs that are required, on blur, if the field is left empty, they turn red. That does not happen to the chips input field. Is there an easy way to implement that?

Answer 1

Assuming that the autocomplete field is an input, you can use Angular form validation to add or remove classes if the field has been touched and is determined invalid. This could be done with CSS like this:

input.ng-dirty.ng-invalid {
color: red;
}

You will also need to check what the input has set as valid, i.e. the field is over a certain minlength or the length of the chips index is over a certain amount.

See also:

1. "Angular automatically add 'ng-invalid' class on 'required' fields"