获取响应式表单FormGroup里的formControl对象示例
Posted kukai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取响应式表单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);
}
}
以上是关于获取响应式表单FormGroup里的formControl对象示例的主要内容，如果未能解决你的问题，请参考以下文章