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获得嵌套表单的值。

相关内容

热门资讯

教学辅助挂!新芒果监利开机有挂... 教学辅助挂!新芒果监利开机有挂吗"好像真的是有辅助软件"(哔哩哔哩)1、新芒果监利开机有挂吗免费辅助...
网友热议!哥哥打大a辅助工具&... 网友热议!哥哥打大a辅助工具"真是确实有辅助教程"(哔哩哔哩)1、进入游戏-大厅左侧-新手福利-激活...
据权威媒体报道!赣牌圈的好牌几... 据权威媒体报道!赣牌圈的好牌几率"确实是有辅助技巧"(哔哩哔哩)所有人都在同一条线上,像星星一样排成...
截至发稿!如何下载科乐填大坑辅... 截至发稿!如何下载科乐填大坑辅助器"竟然真的是有辅助软件"(哔哩哔哩)1、如何下载科乐填大坑辅助器免...
截至发稿!雀友会手机透视辅助器... 截至发稿!雀友会手机透视辅助器app"一贯是有辅助教程"(哔哩哔哩)一、雀友会手机透视辅助器app可...
目前来看!多乐找刺激辅助&qu... 目前来看!多乐找刺激辅助"都是真的有辅助挂"(哔哩哔哩)1、多乐找刺激辅助透视辅助软件激活码多个强度...
2026版辅助挂!柳州八一字牌... 2026版辅助挂!柳州八一字牌辅助"一直真的有辅助教程"(哔哩哔哩)一、柳州八一字牌辅助游戏安装教程...
现场直击!情怀游戏辅助器&qu... 现场直击!情怀游戏辅助器"总结辅助方法"切实存在有挂(哔哩哔哩)1、情怀游戏辅助器模拟器是什么优化,...
经核实!福建大玩家辅助下载&q... 经核实!福建大玩家辅助下载"关于辅助器"切实真的有挂(哔哩哔哩)1、实时福建大玩家辅助下载透视辅助更...
推出新举措!小唐家乐园辅助&q... 推出新举措!小唐家乐园辅助"揭幕辅助神器"确实是真的有挂(哔哩哔哩)1、小唐家乐园辅助破解器简单,小...