要在Angular 7中添加表单新字段,可以按照以下步骤操作:
元素中添加一个新的输入字段,可以在
标签内部添加一个新的元素,然后在该元素内部添加新的输入字段。
- 在组件类中,导入
FormBuilder
和FormGroup
模块,并在构造函数中使用FormBuilder
创建一个新的表单组。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
// 其他表单控件
newField: [''] // 新字段的初始值
});
}
}
- 在组件的模块文件中,确保已导入
FormsModule
和ReactiveFormsModule
模块,并将它们添加到imports
数组中。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyComponentComponent } from './my-component/my-component.component';
@NgModule({
declarations: [MyComponentComponent],
imports: [
CommonModule,
FormsModule, // 为了支持双向绑定
ReactiveFormsModule // 为了支持响应式表单
]
})
export class MyModule { }
通过以上步骤,您就可以在Angular 7中添加一个新的表单字段,并且可以在组件类中访问该字段的值。
相关内容