Angular FormGroup/FormValue-CodePudding

I am confused about FormGroup.

The class has these properties:

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

and in the ngOnit it has:

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

and when adding new employee details it has this

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;
}

Sorry I cannot figure out on my own but what is the point of assigning FormGroup class to formValue property? And why do we have to create a employeeModelObj and assign the values to it?

And what does formBuilder.group do? and why does are we assigning formValue to it with initilization of nothing?

CodePudding user response：

FormGroup is used to create a kind of object that gets updated with your input field values. In your example, this.formValue is tied to a form in your html file.

When the input field in that form gets updated, this.formValue will also get updated.

For example if there is an input in your form that takes firstname, when you change that input, this.formValue.value.firstName will also change. It's a simple concept

CodePudding user response：

What is the point of assigning FormGroup class to formValue property?

This is to create a handle to your main form object.

Why do we have to create a employeeModelObj and assign the values to it?

You actually don't have to do this, you could use the formValue object to pass to your function to persist the object or whatever you want to do with it just as well.

What does formBuilder.group do?

The FormBuilder is an object that helps you create the structure of your form. The .group function creates the main object holding all values. You can actually nest these aswel, to create objects inside the main form object, for instance for an address (street, number, city).

For example:

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

There is also .array, which creates an array inside your form structure.

Without the form builder you would also have to go through this pain before initializing the formcontrols:

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

In other words, it saves you from having to write a lot of boiler plate code.

Why are we assigning formValue to it with initilization of nothing?

This is so the inputs are set to empty strings when the form object is initialized.