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

相关内容

热门资讯

关于透视!wejoker手机版... 关于透视!wejoker手机版透视脚本,拱趴游戏破解器,技法教程(有挂技术)-哔哩哔哩关于透视!we...
关于透视!wpk安卓下载辅助,... 关于透视!wpk安卓下载辅助,sohoo竞技联盟辅助器,模板教程(有挂技巧)-哔哩哔哩sohoo竞技...
解迷透视!hhpkoer辅助挂... 解迷透视!hhpkoer辅助挂是真的吗,wepoker透视底牌脚本,策略教程(有挂方针)-哔哩哔哩1...
解谜透视!aapoker怎么选... 解谜透视!aapoker怎么选牌,德普辅助器怎么用,技法教程(有挂解惑)-哔哩哔哩1、德普辅助器怎么...
分享透视!wepoker如何设... 分享透视!wepoker如何设置透视,wepoker免费透视,攻略教程(有挂秘笈)-哔哩哔哩1、we...
有挂透视!wpk透视是真的假的... 有挂透视!wpk透视是真的假的,菠萝辅助器免费版的特点,烘培教程(有挂细节)-哔哩哔哩1、进入到菠萝...
教你透视!pokemmo辅助工... 教你透视!pokemmo辅助工具,wepoker有辅助器吗,窍要教程(真的有挂)-哔哩哔哩1、wep...
解谜透视!wepokerplu... 解谜透视!wepokerplus透视脚本免费,hhpoker辅助器,课程教程(有挂技巧)-哔哩哔哩1...
揭露透视!哈糖大菠萝攻略,hh... 揭露透视!哈糖大菠萝攻略,hhpoker是内部控制吗,教材教程(揭秘有挂)-哔哩哔哩1、操作简单,无...
教你透视!智星德州插件最新版本... 教你透视!智星德州插件最新版本更新内容详解,wepoker买钻石有用吗,手册教程(详细教程)-哔哩哔...