您可以使用Angular的表单验证功能来检查表单是否有效,并在表单外部显示错误信息。下面是一个示例解决方案:
在组件的HTML模板中,您可以使用Angular的表单验证指令来设置表单控件的验证规则,并在需要显示错误消息的位置添加一个错误消息容器。
在组件的代码中,您可以使用@ViewChild
装饰器来获取表单控件,并在需要时检查表单的有效性。
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
@ViewChild('myForm') myForm: NgForm;
myInputValue: string;
checkFormValidity() {
if (this.myForm.invalid) {
// 表单无效,显示错误消息或执行其他操作
} else {
// 表单有效,执行表单提交操作
}
}
}
在上述示例中,myForm
是通过@ViewChild
装饰器获取的表单控件引用。您可以在checkFormValidity
方法中检查表单的有效性,并根据需要显示错误消息或执行其他操作。
请注意,上述示例中使用了required
验证规则来检查输入是否为空。您可以根据需要添加其他验证规则,并在错误消息容器中显示相应的错误信息。