获取响应式表单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);
     }  
}

标签：FormControl,name,示例,对象,formControl,formcontrol,FormGroup,angular
来源： https://www.cnblogs.com/kukai/p/12111676.html