zoukankan      html  css  js  c++  java
  • 动态增加响应式表单

    页面文件:



    <form *ngFor="let form of list" [formGroup]="form">
    <div class="form-group">
    <label>姓名:</label>
    <input style="color: #000;" type="text" formControlName="name">
    </div>
    <div class="form-group">
    <label>年龄:</label>
    <input style="color: #000;" type="text" formControlName="age">
    </div>
    </form>

    <button type="button" class="btn btn-primary" (click)="addForm()">增加表单</button>
    <button type="button" class="btn btn-primary" (click)="printAllForm()">打印所有表单信息</button>

    ts 文件:

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

    @Component({
    selector: 'app-dynamic-add-reactive-form',
    templateUrl: './dynamic-add-reactive-form.component.html',
    styleUrls: ['./dynamic-add-reactive-form.component.css']
    })
    export class DynamicAddReactiveFormComponent implements OnInit {
    private list: Array<FormGroup>;
    private formNum = 0;
    constructor(
    private fb: FormBuilder
    ) {}
    ngOnInit() {
    this.list = [];
    }
    public addForm(): void {
    // 动态创建响应式表单
    let newform = this['inFlowManholelistForm' + this.formNum];
    newform = this.fb.group({
    name: [''],
    age: ['']
    });
    this.formNum += 1;
    this.list.push(newform);
    }
    public printAllForm(): void {
    this.list.map((value, index) => {
    console.log(value.value);
    });
    }
    }


    ---------------------记一记--------------
  • 相关阅读:
    队列与堆栈
    Python中的内置函数
    Centos 7 最小化部署svn版本控制(svn协议)
    Android中的一些简单的adb命令
    liunx服务程序的安装及配置
    liunx中安装包及其应用
    liunx网络基本命令
    liunx系统和其它的基本命令
    liunx用户管理的基本命令
    liunx的磁盘管理的基本命令
  • 原文地址:https://www.cnblogs.com/hello-dummy/p/9406289.html
Copyright © 2011-2022 走看看