我有个小问题
我在service.ts文件中使用有Angular 的材料React形式
form: FormGroup = this.fb.group({
name: [,Validator.required],
email: [,Validator.required],
})
然后我有一个父组件和两个子组件,如下所示:
<parent>
<child1></child>
<child2></child>
</parent>
我在child 1和child 2组件中分别使用formgroup,方法是在构造函数中初始化service,如下所示:
child1.component.ts
form: FormGroup = this.service.form;
constructor(service: myformService){}
child1.component.html
<form [formGroup]="form">
// input goes here
</form>
类似地,在child 2组件so中,我在服务文件的2个不同组件中调用了相同的表单。
我想从child 2组件提交表单并显示验证错误,但验证错误不起作用。有人能帮助我解决此问题吗?
堆栈 lightning 战:https://stackblitz.com/edit/user-registration-with-fgd-e7p9hb?file=src/app/user-registration/user-registration/user-registration.component.ts
谢谢你,
解决方案:
我希望在单击“提交”按钮时在两个组件(app-address、app-basic-info)中显示验证错误
2条答案
按热度按时间dxxyhpgq1#
当用户单击“提交”按钮时,是的,您可以使用此按钮:
这个.form.markAllAsTouched()函数;
但是另一方面,如果你想立即看到它,你可以使用下面的例子。
第一个
jucafojl2#
您可以使用
markAllAsTouched
,以便“Angular 材质”将显示错误。第一个
堆栈 lightning 战:https://stackblitz.com/edit/user-registration-with-fgd-bpglg2?file=src/app/user-registration/user-registration/basic-info/basic-info.component.ts