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);

      
      }
     

    }
  • 相关阅读:
    在Ubuntu1804上使用Apache2的部署Django配置
    UbuntuServer1804设置uwsgi自启动服务
    ubuntu 安装k8s 1.22.3 (VirtualBox虚拟机)
    启动keepalived 报错
    wasm-pack 编译错误 unexpected character 'u{0}'
    mariadb-安装
    K8S1.18 安装教程
    Ubuntu共享文件权限问题
    docker 安装consul
    Ubuntu 安装 MySQL 和远程连接
  • 原文地址:https://www.cnblogs.com/kukai/p/12111676.html
Copyright © 2011-2022 走看看