在Angular中初始化表单时为其赋予不更新的值是可以的。例如,在一个编辑页面中,你想要在表单中显示某些特定记录的值,即使在用户进行保存时也不会更改。这可以通过以下方式实现:
在组件类中定义表单和变量:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-form-example',
template: `
`
})
export class FormExampleComponent implements OnInit {
exampleForm: FormGroup;
initialValues: { name: string, email: string };
ngOnInit() {
this.initialValues = { name: 'John Doe', email: 'johndoe@example.com' };
this.exampleForm = new FormGroup({
name: new FormControl(this.initialValues.name),
email: new FormControl(this.initialValues.email)
});
}
onSubmit() {
console.log(this.exampleForm.value);
}
}
在上述示例中,初始化表单时,通过FormGroup和FormControl声明表单控件。这将使表单控件与表单进行绑定。在组件类的ngOnInit中,声明了一个名为initialValues的对象,它包含在表单中显示的不可变初始值。这些值在表单初始化时被传递给FormControl。这样,即使在用户提交表单时,这些输入值也不会被更新。
请注意,这是在表单中显示不变值的一种简单方法。由于初始值永远不会更新,因此无法在表单中编辑这些值。如果有必要更新这些初始化值,则需要通过其他方法更新它们。