zoukankan      html  css  js  c++  java
  • 获取响应式表单FormGroup里的formControl对象示例

     获取FormGroup里的FormControl对象,通过FormGroup对象get("FormControlName 名")

    示例

    在根模块导入 

    import { ReactiveFormsModule } from '@angular/forms';
     
    @NgModule({
      declarations: [
        AppComponent,
        HeroFormComponent,
        FormcontrolComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        ReactiveFormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

     html文件

    <form [formGroup]="fg" (ngSubmit)="onSubmit()">
        username:<input type="text" formControlName="name"><br>
        <select formControlName="selectName">
            <option *ngFor="let item of list" [value]="item">{{item}}</option>
        </select>
        <button type="submit">提交</button>
    </form>
     
    ts文件
    import { Component, OnInit } from '@angular/core';
    import { FormControl,FormGroup } from '@angular/forms';
    @Component({
      selector: 'app-formcontrol',
      templateUrl: './formcontrol.component.html',
      styleUrls: ['./formcontrol.component.css']
    })
    export class FormcontrolComponent implements OnInit {

      public list:Array<String>=["北京","天津","深圳"]
    //创建 FormGroup对象
      public fg:FormGroup=new FormGroup({
           name:new FormControl(""),
           selectName:new FormControl("北京")
      });
      constructor() { }

      ngOnInit() {
      }
    //获取FormGroup对象里的FormControl对象
      name=this.fg.get('name');
      onSubmit(){
     
      //获取FormGroup对象里的FormControl对象
      const selected=this.fg.get('selectName');
    //打印FormControl 对象的值
      console.log(selected.value);
    //打印FormControl 对象的值
      console.log(this.name.value);

      
      }
     

    }
  • 相关阅读:
    基于 OAI 部署私有的 4G EPS
    Ubuntu Snap 简述
    OAI SDR LTE 基站部署
    企业文化二三谈
    OpenStack 的 SR-IOV 虚拟机热迁移
    在 ThinkPad E470 上安装 Ubuntu 16.04 无线网卡驱动
    读写可编程 SIM/USIM 卡
    4G LTE/EPC UE 的附着与去附着
    4G EPS 的网络协议栈
    Java- 类型转换
  • 原文地址:https://www.cnblogs.com/kukai/p/12111676.html
Copyright © 2011-2022 走看看