Angular嵌套表单构建器出现“找不到路径上的控件”错误
创始人
2024-10-29 02:30:36
0

在Angular中,嵌套表单构建器是用来处理复杂的表单结构的强大工具。然而,有时候当使用嵌套表单构建器时,可能会遇到“找不到路径上的控件”错误。这个错误通常发生在尝试访问嵌套表单中的控件时。

下面是一个示例代码,演示了如何使用嵌套表单构建器,并解决可能出现的“找不到路径上的控件”错误:

在组件的.ts文件中:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-nested-form',
  templateUrl: './nested-form.component.html',
  styleUrls: ['./nested-form.component.css']
})
export class NestedFormComponent implements OnInit {

  nestedForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.nestedForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      address: this.fb.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        state: ['', Validators.required],
        zip: ['', Validators.required]
      })
    });
  }

  get firstName() { return this.nestedForm.get('firstName'); }
  get lastName() { return this.nestedForm.get('lastName'); }
  get street() { return this.nestedForm.get('address.street'); }
  get city() { return this.nestedForm.get('address.city'); }
  get state() { return this.nestedForm.get('address.state'); }
  get zip() { return this.nestedForm.get('address.zip'); }

  onSubmit() {
    console.log(this.nestedForm.value);
  }

}

在组件的.html文件中:

First Name is required.
Last Name is required.
Street is required.
City is required.
State is required.
Zip is required.

在这个示例中,我们创建了一个嵌套表单构建器,其中包含了一个名为address的子表单组。为了访问子表单组中的

相关内容

热门资讯

1分钟了解!心悦麻将亲友圈有挂... 1分钟了解!心悦麻将亲友圈有挂吗,快玩炸翻天有挂吗,技巧教程(有挂ai代打);1、全新机制【心悦麻将...
七分钟了解!17麻将十三水怎么... 七分钟了解!17麻将十三水怎么调胜率,快玩炸翻天的辅助软件,第三方教程(有挂透明);1、17麻将十三...
二分钟了解!财神十三张如何提高... 二分钟了解!财神十三张如何提高胜率,碧海麻将是不是有挂的,微扑克教程(有挂透视)1、游戏颠覆性的策略...
二分钟了解!中至吉安王炸输赢,... 二分钟了解!中至吉安王炸输赢,皮皮跑得快辅助,德州教程(有挂技巧);一、中至吉安王炸输赢AI软件牌型...
十分钟了解!兴动互娱里面有没有... 十分钟了解!兴动互娱里面有没有外 挂,中至上饶麻将有挂吗,必赢教程(有挂脚本)1、玩家可以在兴动互娱...
八分钟了解!蜀山四川手机麻将有... 八分钟了解!蜀山四川手机麻将有挂吗,微信随意玩辅助器,介绍教程(有挂教程);1)蜀山四川手机麻将有挂...
2分钟了解!潮汕汇app鱼虾蟹... 2分钟了解!潮汕汇app鱼虾蟹有挂吗,花花生活圈辅助器,线上教程(有挂秘笈);1、进入游戏-大厅左侧...
7分钟了解!新蜜瓜正版大厅辅助... 7分钟了解!新蜜瓜正版大厅辅助,拱趴大菠萝免费辅助器,曝光教程(有挂实操)1、每一步都需要思考,不同...
6分钟了解!雀友辅助软件,掌电... 6分钟了解!雀友辅助软件,掌电竞技怎么开挂,2025新版教程(有挂细节)1、掌电竞技怎么开挂透视辅助...
7分钟了解!钱塘十三水怎么刷好... 7分钟了解!钱塘十三水怎么刷好牌,闽游麻将,新2025版(有挂教程)1、下载好钱塘十三水怎么刷好牌辅...