在Angular中,响应式表单确实无法从隐藏字段中获取值。这是因为隐藏字段不会包含在表单的值中,所以无法通过表单控件来访问它们。
一个解决方法是使用FormControl
的setValue
方法来设置隐藏字段的值。下面是一个代码示例:
在组件的初始化中,创建一个隐藏字段的FormControl
对象,并将其添加到表单中:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
form: FormGroup;
hiddenField: FormControl;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.hiddenField = new FormControl('initial value');
this.form = this.formBuilder.group({
// 其他表单字段
// ...
hidden: this.hiddenField
});
}
}
在模板中,使用formControlName
指令将隐藏字段与表单关联,并在需要时通过setValue
方法来设置其值:
在组件中,实现setHiddenValue
方法来设置隐藏字段的值:
setHiddenValue() {
this.hiddenField.setValue('new value');
}
这样,隐藏字段的值就可以通过FormControl
对象的value
属性来访问和获取了。