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

Question

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

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

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

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

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

Change border Input when typing Angular [ngClass] - [(ngModel)]

data-binding

validation

input

angular