Angular : How to check if some control exist in form or not

Question

Below is my code to get a response from the service. Here I am getting a list of employees.

I need to bind form controls dynamically based on the response of service, my service returning more fields(EmployeeId, Name, Department etc.) than the form has controls. How to skip those which are not used in form control?

this._employeeService.getEmployeeById(this.employeeId).subscribe((res: Response) => {
  this.employeeForm.get('FileUploader').setValue(null);
  for (const field in res) {
    this.employeeForm.controls[field].setValue(res[field]);
  }
});

this.employeeForm = this._fb.group({
  EmployeeId: 0,
  Name: ''
});

score 17 · Answer 1 · answered May 06 '20 at 20:22

While there already is an accepted answer, it's worth mentioning that there is indeed a method available just in case it might be useful to those actually wanting a concrete way to verify the existence of a given FormControl within a FormGroup:

contains(controlName: string): boolean

Source: https://angular.io/api/forms/FormGroup#contains

score 12 · Answer 2 · answered Jul 02 '18 at 00:29

You can use the get method of FormGroup class. Change your iterator in getEmployeeById callback, like that:

for (const field in res) {
  const formControl = this.employeeForm.get(field);

  if (formControl) {
     formControl.setValue(res[field]);
  }
}

Source: https://angular.io/api/forms/FormGroup

score 6 · Accepted Answer · answered Jun 29 '18 at 08:29

6

you can use patchValue for set value

this.employeeForm.patchValue(res);

answered Jun 29 '18 at 08:29

Krishna Rathore

7,755
3
19
43

Angular : How to check if some control exist in form or not

3 Answers3