zoukankan      html  css  js  c++  java
  • angular2里的响应式表单范例

    1、在跟模块下导入 

    import { ReactiveFormsModule } from '@angular/forms';

    @NgModule({
      declarations: [
        AppComponent,
        FormArrayComponent,
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        ReactiveFormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    2、在相应组建的Ts.文件代码
    import { Component, OnInit } from "@angular/core";
    import { FormArray, FormControl, FormGroup } from "@angular/forms";
    import { Validators } from "@angular/forms";
    @Component({
      selector: "app-form-array",
      templateUrl: "./form-array.component.html",
      styleUrls: ["./form-array.component.css"]
    })
    export class FormArrayComponent implements OnInit {
      constructor() {}
      formGroup = new FormGroup({
        aliases: new FormArray([new FormControl("", Validators.required)])
      });
      ngOnInit() {}

      // 从formGroup里获取formArray对象,方法名为此FormArray的实例对象名
      get ali() {
        return this.formGroup.get("aliases") as FormArray;
      }
      // 往formArray里添加控件
      addAlias() {
        this.ali.push(new FormControl("", Validators.required));
      }
      onSubmit() {
        console.warn(this.formGroup.value);
      }
    }
    3、HTML文件示例
     
    <form [formGroup]="formGroup"  (ngSubmit)="onSubmit()" >
      <div formArrayName="aliases">
        <h3>Aliases</h3>
        <button (click)="addAlias()">Add Alias</button>
        <div *ngFor="let address of ali.controls; let i = index">
          <label>
            Alias:
            <input type="text" [formControlName]="i" />
          </label>
        </div>
      </div>
     <button type="submit"  [disabled]="!formGroup.valid">Submit</button>
    </form>
  • 相关阅读:
    BZOJ 4886 Lydsy1705月赛 叠塔游戏
    BZOJ 4552 TJOI2016&&HEOI2016 排序
    BZOJ 3702 二叉树
    BZOJ 4756 Usaco2017 Jan Promotion Counting
    BZOJ 4842 Neerc2016 Delight for a Cat
    BZOJ 1283 序列
    BZOJ 4819 SDOI2017 新生舞会
    BZOJ 1531 POI2005 Bank notes
    BZOJ 1925 SDOI2010 地精部落
    BZOJ WC2006 水管局长数据加强版
  • 原文地址:https://www.cnblogs.com/kukai/p/12073059.html
Copyright © 2011-2022 走看看