输入 Angular [ngClass] - [(ngModel)] 时更改边框输入答案

【问题标题】：Change border Input when typing Angular [ngClass] - [(ngModel)]输入 Angular [ngClass] - [(ngModel)] 时更改边框输入
【发布时间】：2021-09-12 01:22:34
【问题描述】：

是否可以在写入时更改输入边框，如果有错误则显示红色边框，如果正确则显示绿色？

换句话说，当我在输入（焦点）内时，我会更改颜色和验证

HTML

<hello name="{{ name }}"></hello>
<input type="text" 
       [(ngModel)]="name" 
       [ngClass]="{'correct': name.length > 0,'error': name.length === 0}"
>

CSS

.correct {
  border: 1px solid greenyellow;
}

.error {
  border: 1px solid red;
}

打字稿

export class AppComponent  {
  name = 'Angular';
}

demo

【问题讨论】：

标签： angular validation input data-binding

【解决方案1】：

您还需要将轮廓更改为 0，并将框阴影更改为焦点

.correct {
  outline: 0;
  border: 1px solid greenyellow;
}
.error
{
  outline: 0;
  border: 1px solid red;

}
input.correct:focus {
  box-shadow: 0 0 0 0.15rem rgba(97, 143, 28,0.25);
}
input.error:focus {
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25)
}

【讨论】：