在Angular 2中,可以使用FormControl对象来验证表单输入。当表单验证失败时,可以使用FormControl对象的errors属性来获取错误消息。以下是一个示例解决方法:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.myForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]]
});
}
onSubmit() {
// 处理表单提交逻辑
}
}
在上述示例中,我们使用了Validators.required和Validators.minLength(3)来定义了表单字段name的验证规则。在模板中,通过myForm.get('name').invalid和myForm.get('name').errors.required等属性来判断验证是否失败,并显示相应的错误消息。
请注意,在上述示例中,我们使用了Angular的响应式表单(FormBuilder和FormGroup)来实现表单验证。确保你的应用已经导入了相关的模块(ReactiveFormsModule)。