Angular响应式表单中嵌套表单的问题。如何在ts文件中声明并在html文件中访问字段。
创始人
2024-10-30 08:00:45
0

在Angular响应式表单中,可以使用FormGroup和FormControl来声明和访问嵌套表单字段。以下是一个示例解决方法:

在ts文件中声明嵌套表单字段:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } 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; // 声明嵌套表单的FormGroup

  constructor() { }

  ngOnInit() {
    this.nestedForm = new FormGroup({
      firstName: new FormControl('', Validators.required), // 在嵌套表单中声明字段
      lastName: new FormControl('', Validators.required),
      address: new FormGroup({
        street: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        state: new FormControl('', Validators.required),
        zip: new FormControl('', Validators.required)
      })
    });
  }

  submitForm() {
    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!

以上代码示例中,我们使用FormGroup和FormControl来声明和访问嵌套表单字段,使用formGroup和formControlName指令在html文件中绑定字段。在submitForm方法中,我们可以通过this.nestedForm.value获得嵌套表单的值。

相关内容

热门资讯

大神推荐!博乐填大坑辅助器通用... 大神推荐!博乐填大坑辅助器通用版(外挂辅助工具)详细教程(有挂透明)-哔哩哔哩关于博乐填大坑辅助器通...
免费测试版!中至上饶小程序有挂... 免费测试版!中至上饶小程序有挂的(外挂辅助插件)详细教程(有挂透明)-哔哩哔哩;亲,其实确实真的有挂...
总算了解!创思维激k辅助器(外... 总算了解!创思维激k辅助器(外挂辅助软件)详细教程(有挂透明)-哔哩哔哩;一、创思维激k辅助器AI软...
指导大家!蜜瓜大厅有挂的(外挂... 指导大家!蜜瓜大厅有挂的(外挂辅助神器)详细教程(有挂技巧)-哔哩哔哩;原来确实真的有挂(需添加指定...
透明肯定!开元辅助器下载(外挂... 透明肯定!开元辅助器下载(外挂辅助APP)详细教程(有挂透明)-哔哩哔哩是一款可以让一直输的玩家,快...
一分钟了解!大晋斗地主随意选牌... 自定义大晋斗地主随意选牌系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅助器,不...
专业讨论!aapoker下载教... 专业讨论!aapoker下载教程(外挂辅助器)详细教程(有挂方法)-哔哩哔哩;一、aapoker下载...
一分钟揭秘!八闽十三水有外挂的... 一分钟揭秘!八闽十三水有外挂的(外挂辅助工具)详细教程(有挂方法)-哔哩哔哩1、许多玩家不知道八闽十...
透明科技!对战互娱有挂的(外挂... 此外,数据分析德州(对战互娱有挂的)辅助神器app还具备辅助透视行为开挂功能,通过对客户对战互娱有挂...
今日重大通报!青龙辅助软件(外... 今日重大通报!青龙辅助软件(外挂辅助挂)详细教程(有挂教程)-哔哩哔哩;玩家在青龙辅助软件中需先进行...