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的子表单组。为了访问子表单组中的

相关内容

热门资讯

黑科技安装(德扑胜率)哈糖大菠... 黑科技安装(德扑胜率)哈糖大菠萝一贯真的有挂!太无语了固有真的有挂(2026已更新)(哔哩哔哩);哈...
黑科技工具(Wepoke系统)... 黑科技工具(Wepoke系统)WPK固有是有挂!太夸张了固有是有挂(2020已更新)(哔哩哔哩);亲...
黑科技辅助挂(微扑克透明挂)线... 黑科技辅助挂(微扑克透明挂)线上wpk其实存在有挂!太离谱了最初是真的有挂(2022已更新)(哔哩哔...
黑科技规律(Wepoke规律)... 您好,wepOkE这款游戏可以开挂的,确实是有挂的,需要了解加微【136704302】很多玩家在这款...
黑科技app(德扑手牌)wpk... 黑科技app(德扑手牌)wpk线上德州俱乐部一直存在有挂!太嚣张了往昔真的有挂(2020已更新)(哔...
辅助黑科技(德州之星app)哈... 辅助黑科技(德州之星app)哈糖大菠萝十三张一直真的有挂!太坑了确实是有挂(2026已更新)(哔哩哔...
黑科技脚本(德州ai智能)aa... 黑科技脚本(德州ai智能)aaPoker起初是真的有挂!太夸张了其实是真的有挂(2026已更新)(哔...
黑科技新版(WPK私人房)传奇... 黑科技新版(WPK私人房)传奇扑克总是有挂!太无语了竟然真的有挂(2020已更新)(哔哩哔哩)是一款...
黑科技游戏(aapoker操作... 黑科技游戏(aapoker操作)微扑克插件一贯是真的有挂!太无语了原先是有挂(2023已更新)(哔哩...
黑科技能赢(wpk辅助器)德州... 黑科技能赢(wpk辅助器)德州aapoker俱乐部总是真的有挂!太坑了本然是真的有挂(2026已更新...