Angular FormGroup/FormValue

Question

我对FormGroup感到困惑。

类有以下属性:

formValue!: FormGroup;
employeeModelObj: EmployeeModel = new EmployeeModel();
employeeData!: any;

在ngOnit中有:

ngOnInit(): void {
this.formValue = this.formBuilder.group({
firstName: [''],
lastName: [''],
emailId: [''],
phoneNumber: [''],
salary: [''],
});
}

，当添加新的员工详细信息时，它有这个

postEmployeeDetails() {
this.employeeModelObj.firstName = this.formValue.value.firstName;
this.employeeModelObj.lastName = this.formValue.value.lastName;
this.employeeModelObj.emailId = this.formValue.value.emailId;
this.employeeModelObj.phoneNumber = this.formValue.value.phoneNumber;
this.employeeModelObj.salary = this.formValue.value.salary;
}

对不起，我不能弄清楚我自己，但什么是分配FormGroup类formValue属性的点?为什么我们必须创建employeeModelObj并将值赋给它?

formBuilder。组织做什么?为什么我们赋值formValue与什么初始化?

Answer 1

将FormGroup类分配给formValue属性的意义是什么?

创建一个主表单对象的句柄。

为什么我们必须创建一个employeeModelObj并将值赋给它?

你实际上不需要这样做，你可以使用formValue对象传递给你的函数来持久化这个对象，或者你想对它做什么。

formBuilder。组织做什么?

FormBuilder是一个帮助你创建表单结构的对象。.group函数创建保存所有值的主对象。实际上，你也可以嵌套这些，在主表单对象中创建对象，例如地址(街道，号码，城市)。

例如:

this.formValue = this.fb.group({
firstName: [''],
address: this.fb.group({
street: [''],
number: [''],
city: ['']
}),
email: ['']
});

还有.array，它在表单结构中创建一个数组。

如果没有表单构建器，在初始化表单控件之前，你还必须经历这些痛苦:

this.formValue = new FormGroup({
firstName: new FormControl(),
lastName: new FormControl(),
emailId: new FormControl(),
phoneNumber: new FormControl(),
salary: new FormControl()
});

换句话说，它使您不必编写大量的样板代码。

为什么我们将formValue赋值给它初始化什么?

这样，当初始化form对象时，输入将被设置为空字符串。

Answer 2

FormGroup用于创建一类对象，该对象使用您的输入字段值进行更新。在你的例子中，这。formValue绑定到html文件中的表单。

当表单中的输入字段被更新时，这。formValue也会被更新

例如，如果表单中有一个以firstname为参数的输入，当您更改该输入时，this.formValue.value.firstName也会更改。这是一个简单的概念