在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属性来访问和获取了。