Angular响应式表单在子组件上提交时无法触发验证。
创始人
2024-10-30 08:00:30
0次

在子组件上手动触发验证,可以通过使用@ViewChild装饰器获取每个子组件的表单控件,并在提交钩子中手动调用其验证方法。以下是示例代码:

父组件模板:

父组件代码:

export class ParentComponent implements OnInit {
  parentForm: FormGroup;
  @ViewChild(ChildComponent) childComponent: ChildComponent;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.parentForm = this.fb.group({
      child: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.parentForm.valid && this.childComponent.childForm.valid) {
      console.log('Form submitted successfully');
    } else {
      console.log('Form submission failed');
    }
  }
}

子组件模板:

子组件代码:

export class ChildComponent {
  childForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.childForm = this.fb.group({
      name: ['', Validators.required]
    });
  }

  validate() {
    Object.values(this.childForm.controls).forEach(control => {
      control.markAsTouched();
      control.updateValueAndValidity();
    });
  }
}

在父组件中,使用@ViewChild来获取ChildComponent实例并存储在childComponent属性中。在提交钩子中,首先检查父表单是否有效,然后检查子组件的表单是否有效。如果子组件表单无效,则手动调用其validate方法以触发验证。在validate方法中,遍历子表单的所有控件,并将其标记为'已触摸”并更新其值和有效性状态。

相关内容

热门资讯

玩家必看分享透视挂!正版授权辅... 玩家必看分享透视挂!正版授权辅助透视挂,上游炸金花真的有外挂,一贯揭秘有挂1.正版授权 选牌创建新账...
玩家攻略透视挂!桃乐永州扯胡子... 玩家攻略透视挂!桃乐永州扯胡子辅助透视挂,龙港麻将是真的有外挂,好像有挂细节1、下载好桃乐永州扯胡子...
一分钟揭秘透视挂!153棋牌辅... 一分钟揭秘透视挂!153棋牌辅助透视挂,黄山麻将是真的有外挂,好像真的有挂1、在153棋牌插件功能辅...
近期开挂!扎西茶楼辅助透视挂,... 近期开挂!扎西茶楼辅助透视挂,豆芽娱乐是真的有外挂,其实有挂方式一、豆芽娱乐游戏安装教程牌型概率发牌...
玩家必看科普透视挂!龙鸣辅助透... 玩家必看科普透视挂!龙鸣辅助透视挂,琼崖海南麻将真的是有外挂,切实有挂头条1、上手简单,内置详细流程...
近日透视挂!长歌行辅助透视挂,... 近日透视挂!长歌行辅助透视挂,新月同行是真的有外挂,真是有挂细节1、完成新月同行有辅助插件,帮助玩家...
重磅来袭辅助!四洲棋牌辅助透视... 重磅来袭辅助!四洲棋牌辅助透视挂,天天爱蚌埠麻将确实有外挂,一贯今日头条1、打开软件启动之后找到中间...
每日必看推荐透视挂!蕲春打拱辅... 每日必看推荐透视挂!蕲春打拱辅助透视挂,天天乐比赛真的有外挂,原来有挂解密1、操作简单,无需天天乐比...
详细说明透视挂!闽乐乐辅助透视... 详细说明透视挂!闽乐乐辅助透视挂,乐游互娱存在有外挂,总是有挂讲解1、该软件可以轻松地帮助玩家将闽乐...
最新技巧开挂!牛大魔王辅助透视... 最新技巧开挂!牛大魔王辅助透视挂,畅游互动真的是有外挂,好像有挂方法1、很好的工具软件,可以解锁游戏...