在Angular中,如果表单重置后输入字段仍被标记为红色,可能是因为重置表单并没有重置字段的状态。可以通过手动重置字段的状态来解决这个问题。
假设有一个名为myForm
的表单和一个名为username
的输入字段,以下是一个解决方法的示例代码:
在组件类中,首先引入FormBuilder
类和FormControl
类:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
然后在组件类中,初始化表单并创建一个名为username
的字段:
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
username: FormControl;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
// 初始化表单
this.myForm = this.formBuilder.group({
username: ''
});
// 创建字段
this.username = this.myForm.get('username') as FormControl;
}
// 重置表单
resetForm() {
this.myForm.reset();
this.username.reset();
this.username.markAsUntouched();
}
}
在模板文件中,将重置表单的方法绑定到一个按钮:
最后,在CSS文件中定义一个名为error
的样式,用于标记输入字段为红色:
input.error {
border: 1px solid red;
}
这样,当点击重置按钮时,表单将被重置,输入字段的状态也会被重置,同时输入字段将不再标记为红色。