在Angular中,要显示错误和红色边框,可以使用Angular的表单控件的状态属性和样式绑定。
首先,在模板中,你需要为表单控件添加一个CSS类来显示红色边框。然后,使用Angular的表单控件状态属性来判断何时应用这个CSS类。
下面是一个示例的Angular响应式表单,展示如何显示错误和红色边框:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl('', Validators.required)
});
}
}
error
样式类:.error {
border-color: red;
}
.error-message {
color: red;
}
这样,当用户输入无效的名称并且离开输入框时,将添加error
类并显示错误消息。