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

      
      }
     

    }
  • 相关阅读:
    Twisted
    day10-redis操作
    day9mysql操作
    day9-paramiko
    day10-rabbitmq
    day9-协程
    day8-异常
    Linux 软连接
    nginx 配置篇
    ansilbe基础学习(一)
  • 原文地址:https://www.cnblogs.com/kukai/p/12111676.html
Copyright © 2011-2022 走看看