正文 

当前位置： 首页 > 源码 >

如何从父组件 OnSubmit Angular 4 触发对子组件的验证？

     2023-03-13     138

关键词：

【中文标题】如何从父组件 OnSubmit Angular 4 触发对子组件的验证？【英文标题】：how to trigger a validation of child component from parent component OnSubmit Angular 4? 【发布时间】：2018-04-27 00:23:13 【问题描述】：

我有这样的表单，在父级中我包括多个子组件，每个子组件都是表单组。现在我需要在用户单击 OnSubmit 时检查父表单上的所有这些子表单验证。

我应该如何在提交时从父级触发子表单验证。我在每个子组件中都使用了 FormBuilder。

当用户单击子字段时，我可以进行验证，但如果用户没有输入任何内容或触摸任何内容并尝试提交不显示错误的验证。

parent.component.html 

<form>
    <child1></child1>
    <child2></child2>
    <child3></child4>
    <child4></child4>
''''
''''
''''
</form>

child1.component.html 

<div formgroup="child1group">
      <div formarray= "child1array">
      ....
      ...
      ...
      </div>
</div

child2.component.html 

<div formgroup="child2group">
      <div formarray= "child2array">
      ....
      ...
      ...
      </div>
</div

请有人告诉我如何在 angular 4 上进行此验证？

【问题讨论】：

【参考方案1】：

将 Formcontrol 作为 OUTPUT 传递给 Parent，然后通过在按钮单击中调用函数 SaveConsole() 进行验证

child1.component.ts

@Output() public childControls = new EventEmitter();

 public ngOnInit() 
        this.childControls.emit(this.child1group);   
        this.child1group.valueChanges.subscribe(() => 
            this.childControls.emit(this.child1group);
        );

parent.component.html

   <form>
        <child1 (childControls)="child1Control = $event"></child1>
         <button (Click)=SaveConsole()> Submit </butto>
   </form>

parent.ts

   public child1Control: FormGroup;
   public SaveConsole() 
          if (this.child1Control.valid) 
            // SAVE FORM
           else 
            this.validateAllFormFields(this.child1Control);  
          
      
     public validateAllFormFields(formGroup: FormGroup) 
      Object.keys(formGroup.controls).forEach(field => 
      const control = formGroup.get(field);
      if (control instanceof FormControl) 
        control.markAsTouched( onlySelf: true );
       else if (control instanceof FormGroup) 
        this.validateAllFormFields(control);
      
    );

【讨论】：

如果我有 20 个子组件，那么我必须在 SaveConsole() 中检查 20 次这些控制器的验证。恕我直言，这是一个不好的方法

如何在 Angular 6 中从父级 HTML 编辑共享组件

】如何在Angular6中从父级HTML编辑共享组件【英文标题】：Howtoeditasharedcomponentfromparent\'sHTMLinangular6【发布时间】：2019-12-2700:09:45【问题描述】：child.component.ts//ignoringallimports@component(selector:\'app-child\',template:\'./child.component.ht 查看详情

Angular 2 @Input - 如何从父组件绑定子组件的 ID 属性？

】Angular2@Input-如何从父组件绑定子组件的ID属性？【英文标题】：Angular2@Input-HowtobindIDpropertyofchildcomponentfromparentcomponent?【发布时间】：2017-02-1512:15:31【问题描述】：在我的父组件中，我想创建一个具有与其关联的唯一ID的子组件... 查看详情

如何在Angular 5中从父组件继承子组件中的css样式

】如何在Angular5中从父组件继承子组件中的css样式【英文标题】：HowtoinheritcssstylesinchildcomponentfromparentinAngular5【发布时间】：2018-09-0601:07:13【问题描述】：我有一个父组件，里面有一个子组件。父组件有一些css类，子组件在其中... 查看详情

如何将 Angular 5 中的点击数据从父组件传递到子组件？

】如何将Angular5中的点击数据从父组件传递到子组件？【英文标题】：Howtopassdataonclickinangular5fromparentcomponenttochildcomponent?【发布时间】：2019-02-1003:51:28【问题描述】：我想将父组件的按钮单击数据传递给子组件，并将子组件呈现... 查看详情

如何在 Angular 1.5 中从父控制器访问组件方法

】如何在Angular1.5中从父控制器访问组件方法【英文标题】：HowtoaccesscomponentmethodsfromparentcontrollerinAngular1.5【发布时间】：2017-01-2518:16:09【问题描述】：我有子组件MyStats，它以列表作为输入数据并显示有关该列表的统计信息。当my... 查看详情

angular 5 从父组件设置子组件属性

】angular5从父组件设置子组件属性【英文标题】：angular5settingchildcomponentpropertyfromparentcomponent【发布时间】：2019-05-0513:15:38【问题描述】：我想从父组件设置子组件属性parent.component.html<div><child-detail#myCarousel[childList]="detail.L... 查看详情

角 6 |如何从父组件调用子组件中的函数？

...角6|如何从父组件调用子组件中的函数？【英文标题】：Angular6|Howtoinvokefunctioninchildcomponentfromparentcomponent?【发布时间】：2019-02-0104:48:03【问题描述】：我是Angular的新手，我已经掌握了来自另一个组件的调用函数。我的结构是：... 查看详情

Angular 2 单元测试数据从父组件传递到子组件

】Angular2单元测试数据从父组件传递到子组件【英文标题】：Angular2unittestingdatapassedfromparentcomponenttochildcomponent【发布时间】：2016-10-2506:03:02【问题描述】：我有一个关于我看到的（极少数）测试从父组件传递到子组件的数据示例... 查看详情

Angular中从父组件到子组件的数据共享

】Angular中从父组件到子组件的数据共享【英文标题】：DataSharingfromparenttochildcomponentinAngular【发布时间】：2020-07-1607:28:33【问题描述】：我尝试使用@input()将数据从父组件发送到子组件现在我正在尝试根据事件将数据从父组件发... 查看详情

Angular - 从父组件向动态子组件发出事件

】Angular-从父组件向动态子组件发出事件【英文标题】：Angular-emiteventfromparentcomponenttodynamicchildcomponents【发布时间】：2018-09-3015:10:50【问题描述】：编辑：我采取了不同的方法来解决这个问题：根据接受的答案，在save()上的父级... 查看详情

如何使用 Angular 4 从 Parent 获取子 DOM 元素引用

】如何使用Angular4从Parent获取子DOM元素引用【英文标题】：HowtogetthechildDOMelementreferencefromParentusingangular4【发布时间】：2018-05-2907:02:04【问题描述】：我需要使用Angular4从父组件获取子组件DOM引用，但我无法访问子组件DOM，请指导... 查看详情

从父类调用子组件方法 - Angular

】从父类调用子组件方法-Angular【英文标题】：Callchildcomponentmethodfromparentclass-Angular【发布时间】：2016-12-2219:52:57【问题描述】：我创建了一个子组件，它有一个我想要调用的方法。当我调用此方法时，它只会触发console.log()行，... 查看详情

如何正确使用 Angular 中的 Observable 将数组数据从父级发送到子级？

】如何正确使用Angular中的Observable将数组数据从父级发送到子级？【英文标题】：HowtosendarraydatafromParenttoChildusingObservableinAngularproperly?【发布时间】：2021-09-0420:18:02【问题描述】：首先，我需要从父组件向子组件发送一些json数据... 查看详情

从父级访问 Angular 1.x 组件属性

】从父级访问Angular1.x组件属性【英文标题】：Accessingangular1.xcomponentpropertyfromparent【发布时间】：2019-01-1614:25:00【问题描述】：我创建了一个Angular1.x星级组件。需要有多个组件实例，因此需要有不同的评级值。但是我想不出从组... 查看详情

从父组件调用时，angular 2 变量在子组件方法中返回 null

】从父组件调用时，angular2变量在子组件方法中返回null【英文标题】：angular2variablereturnsnullinchildcomponentmethodwhencalledfromparentcomponent【发布时间】：2020-05-2221:19:19【问题描述】：我有父子组件通信，我想在子组件中启动一个方法，... 查看详情

如何从父组件调用路由器出口子组件方法

...tcomonent【发布时间】：2018-02-0712:32:15【问题描述】：我是angular2的新手<parent><router-outlet><router-outlet></parent>我在父组件中有一个按钮，如果我单击该按 查看详情

如何在角度2中将数据从父构造函数传递到子组件

...【英文标题】：Howtopassdatafromparrentconstructortochildcomponentinangular2【发布时间】：2017-09-0309:21:35【问题描述】：我有一个Angular2页面，我需要使用来自外部API的相同数据数组来显示2个不同的组件。父组件是常规组件，子组件在其他... 查看详情

如何从父组件调用子组件中的方法？

】如何从父组件调用子组件中的方法？【英文标题】：HowcanIcallmethodinchildcomponentfromparentcomponent?【发布时间】：2018-09-0612:27:29【问题描述】：我有4个组件我的组件首先是这样的：<template>...<component-second></component-second&g... 查看详情